import React, { useEffect } from "react";
import { Box, Text, UseInput } from "./Ink";
import { NumberInput } from "./NumberInput";
import { ConfiguredFilter } from "./Filter";
import { DateInput } from "./DateInput";

type DateFilterProps = {
  filter: ConfiguredFilter;
  onFilterChange: (filter: ConfiguredFilter) => void;
  onFilterComplete: () => void;
  useInput: UseInput;
};

export const DateFilter = ({
  filter,
  onFilterChange,
  onFilterComplete,
  useInput,
}: DateFilterProps): React.JSX.Element => {
  useEffect(() => {
    switch (filter.operator) {
      case "lteDate":
        if (filter.dateMax) {
          onFilterComplete();
        }
        break;
      case "gteDate":
        if (filter.dateMin) {
          onFilterComplete();
        }
        break;
      case "betweenDate":
        if (filter.dateMin && filter.dateMax) {
          onFilterComplete();
        }
        break;
      case "today":
        onFilterComplete();
        break;
      case "inLessThan":
      case "inMoreThan":
      case "lessThanAgo":
      case "moreThanAgo":
      case "inTheNext":
      case "inTheLast":
      default:
    }
  }, [filter]);

  switch (filter.operator) {
    case "lteDate":
      return (
        <Box>
          <Text>Enter your filter maximum date:</Text>
          <DateInput
            onValidation={(date) =>
              onFilterChange({ ...filter, dateMax: date })
            }
            useInput={useInput}
          />
        </Box>
      );
    case "gteDate":
      return (
        <Box>
          <Text>Enter your filter minimum date:</Text>
          <DateInput
            onValidation={(date) =>
              onFilterChange({ ...filter, dateMin: date })
            }
            useInput={useInput}
          />
        </Box>
      );
    case "betweenDate":
      return (
        <Box>
          <Text>
            Enter your filter{" "}
            {filter.operator === "betweenDate"
              ? filter.dateMin === undefined
                ? "minimum "
                : "maximum "
              : ""}
            date:{" "}
          </Text>
          <DateInput
            key={filter.dateMin === undefined ? "min" : "max"}
            onValidation={(value) =>
              filter.dateMin === undefined
                ? onFilterChange({
                    ...filter,
                    dateMin: value,
                  })
                : onFilterChange({
                    ...filter,
                    dateMax: value,
                  })
            }
            useInput={useInput}
          />
        </Box>
      );
    case "today":
      return <></>;
    case "inMoreThan":
    case "moreThanAgo":
    case "inLessThan":
    case "inTheNext":
    case "lessThanAgo":
    case "inTheLast":
      return (
        <Box gap={1}>
          <Text>Enter a number of days:</Text>
          <NumberInput
            onValidation={(days) =>
              onFilterChange({ ...filter, relativeDays: days })
            }
            useInput={useInput}
          />
        </Box>
      );
    default:
      return <></>;
  }
};