import React, { FC, useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { format, isAfter, isBefore, parse } from "date-fns";
import { Box } from "../Box";
import { Button, BUTTON_ICON_POSITION, BUTTON_VARIANT } from "../Button";
import { MenuRenderer } from "../MenuRenderer";
import { PopoverMenu } from "../PopoverMenu";
import { Icon, ICON_TYPE } from "../Icon";
import { Flex } from "../Flex";
import { Text } from "../Text";
import { CustomDateRangeInput } from "./CustomDateRangeInput";
import { DATE_FORMAT, parseDate } from "../../utilities";
import { DatePicker } from "../DatePicker";
import { isValidDate } from "../../utilities/isValidDate";
import {
  cn,
  RangePickerPreset,
  DATE_RANGE_PICKER_CUSTOM_PRESET,
  dateRangePickerFocusInput,
} from "./utils";
import { DateRangePickerProps } from "./types";

export const DateRangePicker: FC<DateRangePickerProps> = ({
  className,
  onChange,
  align = "left",
  presets,
  value,
  minDate,
  maxDate,
  onCustomChange,
  onSave,
  onCancel,
  openToDate,
  disabled,
  customButton,
  ...rest
}) => {
  const placement = align === "left" ? "bottom-start" : "bottom-end";
  const [
    customStartDateInputVal,
    setCustomStartDateInputVal,
  ] = useState<string>("");
  const [customStartDateError, setCustomStartDateError] = useState("");
  const [customEndDateInputVal, setCustomEndDateInputVal] = useState<string>(
    "",
  );
  const [customEndDateError, setCustomEndDateError] = useState("");
  const [customSelectingWhichDate, setCustomSelectingWhichDate] = useState<
    "start" | "end"
  >("start");

  const startInput = useRef<HTMLInputElement>(null);
  const endInput = useRef<HTMLInputElement>(null);

  const handleClose = () => {
    setCustomStartDateError("");
  };

  const [selectedPresetName, setSelectedPresetName] = useState(value.name);
  const [currentPresetName, setCurrentPresetName] = useState(value.name);

  useEffect(() => {
    setSelectedPresetName(value.name);
    setCustomStartDateInputVal(
      value.startDate ? format(value.startDate, DATE_FORMAT) : "",
    );
    setCustomEndDateInputVal(
      value.endDate ? format(value.endDate, DATE_FORMAT) : "",
    );
  }, [value]);

  const customDateInputsValid = useMemo(() => {
    const parsedStart = parseDate(customStartDateInputVal);
    const parsedEnd = parseDate(customEndDateInputVal);
    return !!(parsedStart && parsedEnd);
  }, [customStartDateInputVal, customEndDateInputVal]);

  const displayText = useMemo(() => {
    if (!value) return "Select Date Range";
    return currentPresetName;
  }, [currentPresetName, value]);

  useEffect(() => {
    if (customDateInputsValid) return;
    const inputToFocus =
      customSelectingWhichDate === "start" ? startInput : endInput;
    dateRangePickerFocusInput(inputToFocus);
  }, [customSelectingWhichDate, customDateInputsValid]);

  const validDates = useMemo(() => {
    let start = null;
    let end = null;

    // Parse start date
    if (customStartDateInputVal) {
      const parsed = parse(customStartDateInputVal, DATE_FORMAT, new Date());
      start = isValidDate(parsed) ? parsed : null;
    }

    // Parse end date
    if (customEndDateInputVal) {
      const parsed = parse(customEndDateInputVal, DATE_FORMAT, new Date());
      end = isValidDate(parsed) ? parsed : null;
    }

    // Start date before minDate or after maxDate
    if (
      start &&
      ((minDate && isBefore(start, minDate)) ||
        (maxDate && isAfter(start, maxDate)))
    ) {
      setCustomStartDateError("Outside allowed date range");
      start = null;
    }

    // End date before minDate or after maxDate
    if (
      end &&
      ((minDate && isBefore(end, minDate)) ||
        (maxDate && isAfter(end, maxDate)))
    ) {
      setCustomEndDateError("Outside allowed date range");
      end = null;
    }

    // Start date after endDate
    if (start && end && isAfter(start, end)) {
      setCustomEndDateError("End date cannot be before start date");
      end = null;
    }

    // If start is a Date, remove any error
    if (start) {
      setCustomStartDateError("");
    }

    // If end is a Date, remove any error
    if (end) {
      setCustomEndDateError("");
    }

    return { start, end };
  }, [customStartDateInputVal, customEndDateInputVal, minDate, maxDate]);

  const handleDatePickerChange = ([newStartDate, newEndDate]: [Date, Date]) => {
    if (!newEndDate) dateRangePickerFocusInput(endInput);
    const newStartString = newStartDate
      ? format(newStartDate, DATE_FORMAT)
      : "";
    const newEndString = newEndDate ? format(newEndDate, DATE_FORMAT) : "";
    setCustomStartDateInputVal(newStartString);
    setCustomEndDateInputVal(newEndString);
  };

  const handleDatePickerSelect = (date: Date) => {
    // Handles situation where an end date is provided
    // without a start date
    if (!validDates.start && validDates.end) {
      setCustomStartDateInputVal(format(date, DATE_FORMAT));
    }

    if (selectedPresetName !== DATE_RANGE_PICKER_CUSTOM_PRESET) {
      setSelectedPresetName(DATE_RANGE_PICKER_CUSTOM_PRESET);
    }
  };

  const customApplyBtnDisabled =
    !validDates.start ||
    !validDates.end ||
    !!customStartDateError ||
    !!customEndDateError;

  return (
    <MenuRenderer
      className={classNames(cn(), className)}
      placement={placement}
      onClose={handleClose}
      hasPortal
      trigger={(triggerProps, triggerState) =>
        customButton ? (
          customButton(
            {
              children: displayText,
              disabled,
              ...triggerProps,
            },
            triggerState,
          )
        ) : (
          <Button
            variant={BUTTON_VARIANT.SECONDARY}
            icon={ICON_TYPE.CARET_DOWN}
            iconPosition={BUTTON_ICON_POSITION.RIGHT}
            className={cn({ e: "custom-trigger" })}
            disabled={disabled}
            {...triggerProps}
          >
            <Flex className={cn({ e: "trigger-inner" })}>
              <Icon
                icon={ICON_TYPE.CALENDAR}
                className={cn({ e: "trigger-icon" })}
              />
              <Text as="span" className={cn({ e: "custom-trigger-text" })}>
                {displayText}
              </Text>
            </Flex>
          </Button>
        )
      }
      {...rest}
    >
      {({ listProps, onClose }) => (
        <PopoverMenu {...listProps}>
          <Flex
            className={cn({
              e: "popover-inner-wrapper",
              m: `${align}Aligned`,
            })}
          >
            <Flex className={cn({ e: "presets-wrapper" })}>
              {presets.map((p) => (
                <RangePickerPreset
                  key={p.name}
                  onClick={() => {
                    onChange(p);
                    setSelectedPresetName(p.name);
                    setCustomStartDateInputVal(
                      format(p.startDate, DATE_FORMAT),
                    );
                    setCustomEndDateInputVal(format(p.endDate, DATE_FORMAT));
                  }}
                  isSelected={p.name === selectedPresetName}
                >
                  {p.name}
                </RangePickerPreset>
              ))}
              <RangePickerPreset
                onClick={() => {
                  onCustomChange();
                  setSelectedPresetName(DATE_RANGE_PICKER_CUSTOM_PRESET);
                  setCustomStartDateInputVal("");
                  setCustomEndDateInputVal("");

                  if (!validDates.start) {
                    setCustomSelectingWhichDate("start");
                  }
                }}
                isSelected={
                  selectedPresetName === DATE_RANGE_PICKER_CUSTOM_PRESET
                }
              >
                {DATE_RANGE_PICKER_CUSTOM_PRESET}
              </RangePickerPreset>
            </Flex>
            <Box
              className={classNames(
                cn({ e: "custom-wrapper" }),
                cn({ e: "custom-wrapper", m: `${align}Aligned` }),
              )}
            >
              <Flex className={cn({ e: "custom-date-inputs-wrapper" })}>
                <CustomDateRangeInput
                  ref={startInput}
                  value={customStartDateInputVal}
                  setValue={setCustomStartDateInputVal}
                  error={customStartDateError}
                  setError={setCustomStartDateError}
                  ariaLabel="Start Date"
                  onFocus={() => setCustomSelectingWhichDate("start")}
                  onChange={() => {
                    if (
                      selectedPresetName !== DATE_RANGE_PICKER_CUSTOM_PRESET
                    ) {
                      setSelectedPresetName(DATE_RANGE_PICKER_CUSTOM_PRESET);
                    }
                  }}
                />
                <Text as="span" className={cn({ e: "custom-dates-to" })}>
                  to
                </Text>
                <CustomDateRangeInput
                  ref={endInput}
                  value={customEndDateInputVal}
                  setValue={setCustomEndDateInputVal}
                  error={customEndDateError}
                  setError={setCustomEndDateError}
                  ariaLabel="End Date"
                  onFocus={() => setCustomSelectingWhichDate("end")}
                  onChange={() => {
                    if (
                      selectedPresetName !== DATE_RANGE_PICKER_CUSTOM_PRESET
                    ) {
                      setSelectedPresetName(DATE_RANGE_PICKER_CUSTOM_PRESET);
                    }
                  }}
                />
              </Flex>
              <Box className={cn({ e: "custom-date-calendars-wrapper" })}>
                <DatePicker
                  monthsShown={2}
                  inline
                  onChange={handleDatePickerChange}
                  onSelect={handleDatePickerSelect}
                  selectsRange
                  selected={validDates.start}
                  startDate={validDates.start}
                  endDate={validDates.end}
                  minDate={minDate}
                  maxDate={maxDate}
                  openToDate={openToDate || validDates.end || undefined}
                />
              </Box>
              <Flex className={cn({ e: "custom-date-footer" })}>
                <Button
                  variant={BUTTON_VARIANT.SECONDARY}
                  onClick={() => {
                    if (onClose) {
                      onClose();
                    }
                    if (onCancel) {
                      onCancel();
                    }
                    // Reset to the currently selected preset
                    setSelectedPresetName(currentPresetName);
                    setCustomStartDateInputVal(
                      format(value.startDate, DATE_FORMAT),
                    );
                    setCustomEndDateInputVal(
                      format(value.endDate, DATE_FORMAT),
                    );
                  }}
                >
                  Cancel
                </Button>
                <Button
                  disabled={customApplyBtnDisabled}
                  onClick={() => {
                    if (onClose) {
                      onClose();
                    }
                    const startDate = parseDate(customStartDateInputVal);
                    const endDate = parseDate(customEndDateInputVal);
                    if (startDate && endDate) {
                      setCurrentPresetName(selectedPresetName);
                      onSave({ name: selectedPresetName, startDate, endDate });
                    }
                  }}
                >
                  Apply
                </Button>
              </Flex>
            </Box>
          </Flex>
        </PopoverMenu>
      )}
    </MenuRenderer>
  );
};