import { Button, Card } from "antd";
import { GiftBottomSheet } from "components/CustomBottomSheet/GiftBottomSheet";
import { InfoButtonSheet } from "components/CustomBottomSheet/InfoButtonSheet";
import BuildsIcon from "components/Icons/address/BuildsIcon";
import GoldenHouseIcon from "components/Icons/address/GoldenHouseIcon";
import PresentIcon from "components/Icons/cart/PresentIcon";
import InfoIcon from "components/Icons/InfoIcon";
import { InfoButton } from "components/InfoButton/InfoButton";
import ProText from "components/ProText";
import {
  GiftDetailsType,
  selectCart,
  updateGiftDetails,
} from "features/order/orderSlice";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";

export const GiftDetails = () => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { giftDetails } = useAppSelector(selectCart);
  const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);
  const [isInfoButtonSheetOpen, setIsInfoButtonSheetOpen] = useState(false);
  const { orderType } = useAppSelector(selectCart);

  const handleGiftDetailsSave = useCallback(
    (giftDetailsData: GiftDetailsType) => {
      try {
        dispatch(updateGiftDetails(giftDetailsData));
        console.log("Gift details saved to Redux store:", giftDetailsData);
      } catch (error) {
        console.error("Failed to parse location data:", error);
      }
    },
    [dispatch],
  );

  const handleOfficeBottomSheetOpen = useCallback(() => {
    setIsOfficeBottomSheetOpen(true);
  }, []);

  const handleOfficeBottomSheetClose = useCallback(() => {
    setIsOfficeBottomSheetOpen(false);
  }, []);

  const handleInfoButtonSheetOpen = useCallback(() => {
    setIsInfoButtonSheetOpen(true);
  }, []);

  const handleInfoButtonSheetClose = useCallback(() => {
    setIsInfoButtonSheetOpen(false);
  }, []);

  const buttonText = useMemo(
    () => (giftDetails ? t("address.changeGift") : t("address.selectGift")),
    [giftDetails, t],
  );

  return (
    orderType === OrderType.Gift && (
      <>
        <Card
          title={t("address.giftDetails")}
          extra={
            <Button
              type="primary"
              size="small"
              onClick={handleOfficeBottomSheetOpen}
              style={{ boxShadow: "none" }}
            >
              {buttonText}
            </Button>
          }
        >
          <br />
          <div className={styles.iconCenterContainer}>
            <div className={styles.floatingContainer}>
              <div className={styles.floatingPresent}>
                <PresentIcon dimensions={125} />
              </div>
              <div className={styles.floatingShadow} />
            </div>
          </div>
          <br />
          <div className={styles.detailsRowContainer}>
            <div className={styles.detailItemContainer}>
              <Button
                type="text"
                shape="circle"
                className={styles.iconButtonStyle}
              >
                <GoldenHouseIcon />
              </Button>
              <div>
                <ProText className={styles.detailLabelStyle}>
                  {t("address.receiverName")}
                </ProText>
                <br />
                <ProText type="secondary">{giftDetails?.receiverName}</ProText>
              </div>
            </div>

            <div className={styles.detailItemContainer}>
              <Button
                type="text"
                shape="circle"
                className={styles.iconButtonStyle}
              >
                <BuildsIcon />
              </Button>
              <div>
                <ProText className={styles.detailLabelStyle}>
                  {t("address.receiverPhone")}
                </ProText>
                <br />
                <ProText type="secondary">{giftDetails?.receiverPhone}</ProText>
              </div>
            </div>
          </div>
        </Card>

        <InfoButton
          icon={<InfoIcon />}
          title={t("address.howItWorks")}
          onInfoClick={handleInfoButtonSheetOpen}
        />

        <InfoButtonSheet
          isOpen={isInfoButtonSheetOpen}
          onClose={handleInfoButtonSheetClose}
          title={t("address.howItWorks")}
          description={t("address.howItWorksDescription")}
        />

        <GiftBottomSheet
          isOpen={isOfficeBottomSheetOpen}
          onClose={handleOfficeBottomSheetClose}
          initialValue={giftDetails}
          onSave={handleGiftDetailsSave}
        />
      </>
    )
  );
};
