import React, { ReactNode, useEffect, useState } from "react";
import { CustomDatePicker, DatePickerContainer } from "./DatePickerStyles";
import { Dayjs as DayjsType } from "dayjs";
import Dayjs from "dayjs";
import { grayLight400, primaryFont } from "../constants";
import quarterOfYear from "dayjs/plugin/quarterOfYear";
Dayjs.extend(quarterOfYear);

export interface AntDatePickerProps {
  picker: "date" | "month" | "quarter" | "year";
  suffixIcon?: ReactNode;
  placeholder?: string;
  format?: string;
  value?: DayjsType | string;
  allowClear?: boolean;
  className?: string;
  disabled?: boolean;
  disabledDate?: (currentDate: DayjsType) => boolean;
  open?: boolean;
  placement?: "bottomLeft" | "bottomRight" | "topRight" | "topLeft";
  defaultPickerValue?: DayjsType;
  defaultValue?: DayjsType;
  showToday?: boolean;
  onChange?: (e?: any) => void;
  isShowArrows?: boolean;
  nextIcon?: ReactNode;
  prevIcon?: ReactNode;
  superPrevIcon?: ReactNode;
  superNextIcon?: ReactNode;
}
const calendar = new URL("./assets/calendar.svg", import.meta.url).href;
const leftArrow = new URL("./assets/keyboard-arrow-left.svg", import.meta.url)
  .href;
const rightArrow = new URL("./assets/keyboard-arrow-right.svg", import.meta.url)
  .href;

export const DatePicker: React.FC<AntDatePickerProps> = (props) => {
  const { picker, defaultValue, isShowArrows = true, onChange, value } = props;
  const [selectedDate, setSelectedDate] = useState(
    defaultValue ? defaultValue : Dayjs()
  );

  useEffect(() => {
    const formattedValue = Dayjs(value);
    if (value && formattedValue && selectedDate != formattedValue) {
      setSelectedDate(formattedValue);
    }
  }, [value])

  const handleGoBack = () => {
    switch (picker) {
      case "date":
        if (onChange) onChange(selectedDate.subtract(1, "day"));
        return setSelectedDate(selectedDate.subtract(1, "day"));
      case "month":
        if (onChange) onChange(selectedDate.subtract(1, "month"));
        return setSelectedDate(selectedDate.subtract(1, "month"));
      case "quarter":
        if (onChange) onChange(selectedDate.subtract(1, "quarter"));
        return setSelectedDate(selectedDate.subtract(1, "quarter"));
      case "year":
        if (onChange) onChange(selectedDate.subtract(1, "year"));
        return setSelectedDate(selectedDate.subtract(1, "year"));
      default:
        return null;
    }
  };
  const handleGoForward = () => {
    switch (picker) {
      case "date":
        if (onChange) onChange(selectedDate.add(1, "day"));
        return setSelectedDate(selectedDate.add(1, "day"));
      case "month":
        if (onChange) onChange(selectedDate.add(1, "month"));
        return setSelectedDate(selectedDate.add(1, "month"));
      case "quarter":
        if (onChange) onChange(selectedDate.add(1, "quarter"));
        return setSelectedDate(selectedDate.add(1, "quarter"));
      case "year":
        if (onChange) onChange(selectedDate.add(1, "year"));
        return setSelectedDate(selectedDate.add(1, "year"));
      default:
        return null;
    }
  };

  const formatDate = () => {
    switch (picker) {
      case "date":
        return "MM/DD/YYYY";
      case "month":
        return "MMM YYYY";
      case "quarter":
        return "[Q]Q YYYY";
      case "year":
        return "YYYY";
      default:
        return "";
    }
  };
  return (
    <DatePickerContainer>
      {isShowArrows ? <img src={leftArrow} onClick={handleGoBack} /> : null}
      <CustomDatePicker
        {...props}
        suffixIcon={<img src={calendar} />}
        format={formatDate()}
        allowClear={false}
        popupStyle={{
          fontFamily: primaryFont,
          fontSize: "16px",
          color: grayLight400,
          position: "relative",
          top: "72px",
          width: "288px",
        }}
        value={selectedDate}
        onChange={(e) => {
          setSelectedDate(e)
          if (onChange) onChange(e);
        }}
        prevIcon={<img src={leftArrow} />}
        nextIcon={<img src={rightArrow} />}
        superPrevIcon={<img src={leftArrow} />}
        superNextIcon={<img src={rightArrow} />}
      />
      {isShowArrows ? <img src={rightArrow} onClick={handleGoForward} /> : null}
    </DatePickerContainer>
  );
};
