import React from "react";
import classnames from "classnames";
import {
  SegmentAttributeComparator,
  SegmentExpression,
  SegmentPropertyAttribute,
} from "@komi-app/fans-sdk";

import { InverterLabel,InverterBlock } from "../InverterBlock";

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

import { DateSelectRuleBlock } from "../DateSelectRuleBlock";
import { DateRangeComparatorBlock } from "../DateRangeComparatorBlock";
import When from "@komi-app/when";
import "./DateRange.scss";

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

export const DateRangeBlock: React.FC<DateComparisonBlockProps> = ({
  expression,
  onExpressionChange,
  segmentPropertyAttributes,
  ...props
}) => {
  const {
    attributeName,
    attributeComparator,
    attributeValues = [],
    inverted,
  } = expression;
  const { defaultValues = [] } = getAttributeByName(
    attributeName,
    segmentPropertyAttributes
  );

  const [defaultLowerValue, defaultUpperValue] = defaultValues;

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

  const numericLowerValue = lowerValue;
  const numericUpperValue = 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: string, upperValue?: string) => {
    const updatedValues = [String(lowerValue)];
    if (isRange(attributeComparator) && upperValue) {
      updatedValues.push(String(upperValue));
    }
    const newExpression = {
      ...expression,
      attributeValues: updatedValues,
    };
    onExpressionChange(newExpression);
  };

  const handleSqlInvertedChange = (inverted: boolean) => {
    const updatedExpression = { ...expression, inverted };
    onExpressionChange(updatedExpression);
  };

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

  return (
    <div {...props} className={classNames}>
      <InverterBlock
        initialValue={inverted}
        labelType={InverterLabel.Is}
        onValueChange={handleSqlInvertedChange}
      />
      <DateRangeComparatorBlock
        value={expression.attributeComparator}
        onValueChange={handleComparatorChange}
      />

      <When
        value={isRange(attributeComparator)}
        then={
          <>
            <DateSelectRuleBlock
              className="rule-clause__attribute-value"
              date={numericLowerValue}
              maxValue={numericUpperValue}
              onValueChange={(lower) =>
                handleNumberValueChange(lower, numericUpperValue)
              }
            />
            and
            <DateSelectRuleBlock
              className="rule-clause__attribute-value"
              date={numericUpperValue}
              minValue={numericLowerValue}
              onValueChange={(upper) =>
                handleNumberValueChange(numericLowerValue, upper)
              }
            />
          </>
        }
        otherwise={
          <DateSelectRuleBlock
            className="rule-clause__attribute-value"
            date={numericLowerValue}
            onValueChange={(lower) =>
              handleNumberValueChange(lower)
            }
          />
        }
      />
    </div>
  );
};
