import React from 'react';
import { ComparatorBlock } from '../../RuleBlocks';
import { NumericRuleBlock } from '../../RuleBlocks';

import { SegmentAttributeComparator, SegmentExpression, SegmentPropertyAttribute } from '@komi-app/fans-sdk';

import { getAttributeByName, isRange } from '../../../utils/attributes';

import classnames from 'classnames';
import './NumericComparisonBlock.scss';

export interface NumericComparisonBlockProps extends React.HTMLProps<HTMLDivElement> {
  expression: SegmentExpression;
  onExpressionChange: (expression: SegmentExpression) => void;
  segmentPropertyAttributes: SegmentPropertyAttribute[],
}

export const NumericComparisonBlock: React.FC<NumericComparisonBlockProps> = ({
  expression,
  onExpressionChange,
  segmentPropertyAttributes,
  ...props
}) => {
  const { attributeName, attributeComparator, attributeValues = [] } = expression;

  const { defaultValues = [] } = getAttributeByName(attributeName, segmentPropertyAttributes);
  const [defaultLowerValue, defaultUpperValue] = defaultValues;

  const [lowerValue = defaultLowerValue, upperValue = defaultUpperValue] = attributeValues;

  const numericLowerValue = Number(lowerValue);
  const numericUpperValue = Number(upperValue);

  const handleComparatorChange = (value: SegmentAttributeComparator) => {
    const updatedValues = isRange(value)
      ? [String(numericLowerValue), String(numericUpperValue)]
      : [String(numericLowerValue)];

    const newExpression = {
      ...expression,
      attributeComparator: value,
      attributeValues: updatedValues,
    };
    onExpressionChange(newExpression);
  };
  const handleNumberValueChange = (lowerValue: number, upperValue?: number) => {
    const updatedValues = [String(lowerValue)];

    if (isRange(attributeComparator) && upperValue) {
      updatedValues.push(String(upperValue));
    }

    const newExpression = {
      ...expression,
      attributeValues: updatedValues,
    };
    onExpressionChange(newExpression);
  };

  const classNames = classnames("numeric-comparison-block");

  return (
    <div {...props} className={classNames}>
      <ComparatorBlock
        value={expression.attributeComparator}
        onValueChange={handleComparatorChange}
      />

      {isRange(attributeComparator) ? (
        <React.Fragment>
          <NumericRuleBlock
            className="rule-clause__attribute-value"
            value={numericLowerValue}
            onValueChange={(lower) => handleNumberValueChange(lower, numericUpperValue)}
          />
          and
          <NumericRuleBlock
            className="rule-clause__attribute-value"
            value={numericUpperValue}
            onValueChange={(upper) => handleNumberValueChange(numericLowerValue, upper)}
          />
        </React.Fragment>
      ) : (
        <NumericRuleBlock
          className="rule-clause__attribute-value"
          value={numericLowerValue}
          onValueChange={(lower) => handleNumberValueChange(lower)}
        />
      )}
    </div>
  );
};
