import { Button, Card } from "antd";
import { OfficeBottomSheet } from "components/CustomBottomSheet/OfficeBottomSheet";
import BuildsIcon from "components/Icons/address/BuildsIcon";
import GoldenHouseIcon from "components/Icons/address/GoldenHouseIcon";
import RoomServiceIcon from "components/Icons/address/RoomServiceIcon";
import ProText from "components/ProText";
import {
  OfficeDetailsType,
  selectCart,
  updateOfficeDetails,
} 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 OfficeDetails = () => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { officeDetails } = useAppSelector(selectCart);
  const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);

  const { orderType } = useAppSelector(selectCart);

  const handleOfficeDetailsSave = useCallback(
    (officeDetailsData: OfficeDetailsType) => {
      try {
        dispatch(updateOfficeDetails(officeDetailsData));
        console.log("Office details saved to Redux store:", officeDetailsData);
      } catch (error) {
        console.error("Failed to parse location data:", error);
      }
    },
    [dispatch],
  );

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

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

  const buttonText = useMemo(
    () =>
      officeDetails ? t("address.changeOffice") : t("address.selectOffice"),
    [officeDetails, t],
  );

  return (
    orderType === OrderType.ToOffice && (
      <>
        <Card
          title={t("address.officeDetails")}
          extra={
            <Button
              type="primary"
              size="small"
              onClick={handleOfficeBottomSheetOpen}
              style={{ boxShadow: "none" }}
            >
              {buttonText}
            </Button>
          }
        >
          <br />
          <div className={styles.iconCenterContainer}>
            <RoomServiceIcon />
          </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.floorNo")}
                </ProText>
                <br />
                <ProText type="secondary">{officeDetails?.floorNo}</ProText>
              </div>
            </div>

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

        <OfficeBottomSheet
          isOpen={isOfficeBottomSheetOpen}
          onClose={handleOfficeBottomSheetClose}
          initialValue={officeDetails}
          onSave={handleOfficeDetailsSave}
        />
      </>
    )
  );
};
