import { Form } from "antd";
import useFormInstance from "antd/es/form/hooks/useFormInstance";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
import dayjs from "dayjs";
import {
  selectCart,
  updateEstimateWay,
  updatePickupDate,
  updatePickupTime,
  updatePickUpType,
} from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";

export default function TimeEstimateCard() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const form = useFormInstance();
  const { isDesktop } = useBreakPoint();
  const { estimateWay } = 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({ estimateWay });
  }, [estimateWay]);
  

  return (
    <>
      <ProInputCard title={t("cart.estimateTime")}>
        <Form.Item
          name="estimateWay"
          required
          rules={[
            { required: true, message: t("cart.pleaseSelectEstimateTime") },
          ]}
        >
          <ProRatioGroups
            options={[
              { label: t("cart.now"), value: "now", price: "" },
              { label: t("cart.later"), value: "later", price: "" },
            ]}
            value={estimateWay}
            onRatioClick={(value) => {
              if (value === "now") {
                dispatch(updateEstimateWay(value));
                handleEstimateTimeSave(
                  dayjs().format(SERVER_DATE_FORMAT),
                  dayjs().format(UI_TIME_FORMAT),
                );
                dispatch(updatePickUpType("now"));
              } else {
                dispatch(updateEstimateWay(value));
                dispatch(updatePickUpType(""));
                setIsEstimateTimeOpen(true);
              }
            }}
          />
        </Form.Item>
        {/* {estimateWay === "later" && (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              gap: "15px",
            }}
          >
            <ProDateFormInput
              pickerProps={{
                size: "middle",
                open: false,
                onClick: (e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setIsEstimateTimeOpen(true);
                },
              }}
              formItemProps={{ name: "pickupDate" }}
            />

            <TimeFormInput
              pickerProps={{
                size: "middle",
                open: false,
                onClick: (e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setIsEstimateTimeOpen(true);
                },
              }}
              formItemProps={{ name: "pickupTime" }}
            />
          </div>
        )} */}
      </ProInputCard>
      {isDesktop ? (
        <Dialog
          isOpen={isEstimateTimeOpen}
          onClose={handleEstimateTimeClose}
          onSave={handleEstimateTimeSave}
        />
      ) : (
        <BottomSheet
          isOpen={isEstimateTimeOpen}
          onClose={handleEstimateTimeClose}
          onSave={handleEstimateTimeSave}
        />
      )}
    </>
  );
}