import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import { updateGiftDetails } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon";
import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon";
import GiftItemsAndBalanceBtnIcon from "components/Icons/GiftItemsAndBalanceBtnIcon";
import ProText from "components/ProText";
import { useParams, useNavigate } from "react-router-dom";

interface GiftTypeBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSave?: () => void;
}

export enum GiftType {
  Items = "items",
  Vouchers = "vouchers",
  ItemsAndVouchers = "itemsAndVouchers",
}

export function GiftTypeBottomSheet({
  isOpen,
  onClose,
  onSave,
}: GiftTypeBottomSheetProps) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { subdomain } = useParams();
  const navigate = useNavigate();
  const handleSave = (giftType: GiftType) => {
    dispatch(updateGiftDetails({ giftType }));
    onClose();
    onSave?.();
    if (giftType !== GiftType.Vouchers)
      navigate(`/${subdomain}/menu?orderType=gift`);
    else navigate(`/${subdomain}/e-gift-cards`);
  };

  const handleCancel = () => {
    onClose();
  };

  const textStyle: React.CSSProperties = {
    fontWeight: 500,
    fontStyle: "Medium",
    fontSize: 14,
    lineHeight: "140%",
    letterSpacing: "0%",
    textAlign: "center",
    color: "#86858E",
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("gift.selectGiftType")}
      showCloseButton={false}
      initialSnap={1}
      height={260}
      snapPoints={[260]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          gap: 10,
          justifyContent: "space-between",
          padding: 24,
        }}
      >
        <div style={{ width: 60 }} onClick={() => handleSave(GiftType.Items)}>
          <GiftItemsBtnIcon />
          <br />
          <ProText style={textStyle}>{t("gift.items")}</ProText>
        </div>
        <div
          style={{ width: 60 }}
          onClick={() => handleSave(GiftType.Vouchers)}
        >
          <GiftBalanceBtnIcon />
          <br />
          <ProText style={textStyle}>{t("gift.balance")}</ProText>
        </div>
        <div
          style={{ width: 60 }}
          onClick={() => handleSave(GiftType.ItemsAndVouchers)}
        >
          <GiftItemsAndBalanceBtnIcon />
          <br />
          <ProText style={textStyle}>{t("gift.itemsAndBalance")}</ProText>
        </div>
      </div>
    </ProBottomSheet>
  );
}
