import { Form, FormInstance, Input } from "antd";
import DatePickerBottomSheet from "components/CustomBottomSheet/DatePickerBottomSheet";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { selectCart, updateScheduledDate } from "features/order/orderSlice";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";

export default function DateCard({ form }: { form: FormInstance }) {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const { scheduledDate } = useAppSelector(selectCart);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <ProInputCard
        title={t("cart.scheduledDate")}
        dividerStyle={{ margin: "5px 0 0 0" }}
      >
        <Form.Item
          label={t("cart.scheduledDate")}
          name="date"
          required
          rules={[{ required: true }]}
          style={{position:"relative", top: -5}}
        >
          <Input
            placeholder={t("cart.scheduledDate")}
            size="large"
            onClick={() => setIsOpen(true)}
            readOnly
            value={scheduledDate}
            style={{
              cursor: "pointer",
              height: 50,
              fontSize: 14,
              borderRadius: 888,
            }}
          />
        </Form.Item>
      </ProInputCard>

      <DatePickerBottomSheet
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onDateSelect={(date) => {
          const formattedDate = `${date.month}/${date.day}/${date.year}`;
          dispatch(updateScheduledDate(formattedDate));
          form.setFieldValue("date", formattedDate);
        }}
        initialDate={new Date(1990, 0, 1)}
      />
    </>
  );
}