import { updateSpecialRequest, selectCart } from "features/order/orderSlice.ts";
import { message, Input } from "antd";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { colors } from "ThemeConstants.ts";
import { RightOutlined } from "@ant-design/icons";
import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet.tsx";
import { useState } from "react";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog.tsx";

export default function SpecialRequestCard() {
  const { t } = useTranslation();
  const { isDesktop } = useBreakPoint();
  const dispatch = useAppDispatch();
  const { specialRequest } = useAppSelector(selectCart);

  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);

  const handleSpecialRequestSave = (value: string) => {
    dispatch(updateSpecialRequest(value));
    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
  };

  const handleSpecialRequestClose = () => {
    setIsSpecialRequestOpen(false);
  };
  return (
    <>
      <ProInputCard title={t("cart.specialRequest")}>
        <Input
          value={specialRequest}
          placeholder={t("cart.specialRequest")}
          size="large"
          autoFocus={false}
          style={{ height: 50 }}
          suffix={
            <div
              style={{
                color: colors.primary,
                fontSize: 14,
                cursor: "pointer",
              }}
              onClick={() => setIsSpecialRequestOpen(true)}
            >
              <u>{t("cart.editNote")}</u> <RightOutlined />
            </div>
          }
        />
      </ProInputCard>
      {isDesktop ? (
        <SpecialRequestDialog
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />
      ) : (
        <SpecialRequestBottomSheet
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />
      )}
    </>
  );
}