import useFormInstance from "antd/es/form/hooks/useFormInstance";
import TimeIcon from "components/Icons/order/TimeIcon";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText";
import {
  selectCart,
  updatePickupDate,
  updatePickupTime,
} from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { PickupEstimateDialog } from "./Dialog";
import { PickupEstimateBottomSheet } from "./BottomSheet";

export default function PickupTimeCard() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const form = useFormInstance();
  const { isDesktop } = useBreakPoint();
  const { pickupTime, pickupDate } = useAppSelector(selectCart);
  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);

  const handleEstimateTimeSave = (date: string, time: string) => {
    form.setFieldsValue({ pickupTime: time, pickupDate: date });
    dispatch(updatePickupTime(time));
    dispatch(updatePickupDate(date));
  };

  const handleEstimateTimeClose = () => {
    setIsEstimateTimeOpen(false);
  };

  useEffect(() => {
    form.setFieldsValue({ pickupTime, pickupDate });
  }, [pickupTime, pickupDate]);

  return (
    <>
      <ProInputCard
        title={t("checkout.pickup")}
        titleRight={
          <ProText
            onClick={() => setIsEstimateTimeOpen(true)}
            style={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#FFB700",
              cursor: "pointer",
            }}
          >
            {t("checkout.change")}
          </ProText>
        }
      >
        <span style={{ position: "relative", top: 3 }}>
          <TimeIcon color="#777580" />
        </span>
        <ProText
          style={{
            fontWeight: 400,
            fontStyle: "Regular",
            fontSize: 16,
            lineHeight: "140%",
            letterSpacing: "0%",
            color: "#777580",
            padding: "0 2px 0 4px",
          }}
        >
          {pickupTime}
        </ProText>
        <ProText
          style={{
            fontWeight: 400,
            fontStyle: "Regular",
            fontSize: 16,
            lineHeight: "140%",
            letterSpacing: "0%",
            color: "#777580",
            padding: "0 2px",
          }}
        >
          (Est. 10-15 minutes)
        </ProText>
      </ProInputCard>

      {isDesktop ? (
        <PickupEstimateDialog
          isOpen={isEstimateTimeOpen}
          onClose={handleEstimateTimeClose}
          onSave={handleEstimateTimeSave}
        />
      ) : (
        <PickupEstimateBottomSheet
          isOpen={isEstimateTimeOpen}
          onClose={handleEstimateTimeClose}
          onSave={handleEstimateTimeSave}
        />
      )}
    </>
  );
}