import { Button, Card } from "antd";
import { RoomBottomSheet } from "components/CustomBottomSheet/RoomBottomSheet";
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 {
  RoomDetailsType,
  selectCart,
  updateRoomDetails,
} 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 RoomDetails = () => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { roomDetails } = useAppSelector(selectCart);
  const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);

  const { orderType } = useAppSelector(selectCart);

  const handleRoomDetailsSave = useCallback(
    (roomDetailsData: RoomDetailsType) => {
      try {
        dispatch(updateRoomDetails(roomDetailsData));
        console.log("Room details saved to Redux store:", roomDetailsData);
      } catch (error) {
        console.error("Failed to parse location data:", error);
      }
    },
    [dispatch],
  );

  const handleRoomBottomSheetOpen = useCallback(() => {
    setIsRoomBottomSheetOpen(true);
  }, []);

  const handleRoomBottomSheetClose = useCallback(() => {
    setIsRoomBottomSheetOpen(false);
  }, []);

  const buttonText = useMemo(
    () => (roomDetails ? t("address.changeRoom") : t("address.selectRoom")),
    [roomDetails, t],
  );

  return (
    orderType === OrderType.ToRoom && (
      <>
        <Card
          title={t("address.roomDetails")}
          extra={
            <Button
              type="primary"
              size="small"
              onClick={handleRoomBottomSheetOpen}
              style={{ boxShadow: "none" }}
            >
              {buttonText}
            </Button>
          }
        >
          <br />
          <div className={styles.iconCenterContainer}>
            <RoomServiceIcon />
          </div>
          <br />
          <div className={styles.detailsRowContainer}>
            <div className={styles.detailItemContainer}>
              <Button
                className={styles.iconButtonStyle}
                icon={<GoldenHouseIcon />}
              />
              <div>
                <ProText className={styles.detailLabelStyle}>
                  {t("address.floorNo")}
                </ProText>
                <br />
                <ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.floorNo}</ProText>
              </div>
            </div>

            <div className={styles.detailItemContainer}>
              <Button
                className={styles.iconButtonStyle}
                icon={<BuildsIcon />} 
              />
              <div>
                <ProText className={styles.detailLabelStyle}>
                  {t("address.roomNo")}
                </ProText>
                <br />
                <ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.roomNo}</ProText>
              </div>
            </div>
          </div>
        </Card>

        <RoomBottomSheet
          isOpen={isRoomBottomSheetOpen}
          onClose={handleRoomBottomSheetClose}
          initialValue={roomDetails}
          onSave={handleRoomDetailsSave}
        />
      </>
    )
  );
};