import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { selectCart, updateSpecialRequest } from "features/order/orderSlice.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
import styles from "./SpecialRequestCard.module.css";

export default function SpecialRequestCard() {
  const { t } = useTranslation();
  const { isDesktop } = useBreakPoint();
  const dispatch = useAppDispatch();
  const { specialRequest } = useAppSelector(selectCart);
  const { isRTL } = useAppSelector((state) => state.locale);
  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);

  const handleSpecialRequestSave = (value: string) => {
    dispatch(updateSpecialRequest(value));
  };

  const handleSpecialRequestClose = () => {
    setIsSpecialRequestOpen(false);
  };

  return (
    <>
      <ProInputCard
        title={t("cart.specialRequest")}
        dividerStyle={{ margin: "5px 0 0 0" }}
      >
        <Form.Item
          label={t("cart.specialRequest")}
          name="specialRequest"
          style={{ position: "relative", top: -5 }}
        >
          <Input
            placeholder={t("cart.specialRequest")}
            size="large"
            autoFocus={false}
            className={styles.inputField}
            onChange={(e) => handleSpecialRequestSave(e.target.value)}
            suffix={
              <div
                className={styles.editButton}
                onClick={() => setIsSpecialRequestOpen(true)}
              >
                <u>{t("cart.editNote")}</u> {isRTL ? <LeftOutlined /> : <RightOutlined />}
              </div>
            }
          />
        </Form.Item>
      </ProInputCard>
      {isDesktop ? (
        <Dialog
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />
      ) : (
        <BottomSheet
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />
      )}
    </>
  );
}