import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import NextIcon from "components/Icons/NextIcon";
import { useAppSelector } from "redux/hooks";
import { OrderType } from "pages/checkout/hooks/types";
import { useSearchParams } from "react-router-dom";

interface OrderTypesBottomSheetBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

export function OrderTypesBottomSheet({
  isOpen,
  onClose,
}: OrderTypesBottomSheetBottomSheetProps) {
  const { t } = useTranslation();
  const { restaurant, orderType, hiddenServices } = useAppSelector(
    (state) => state.order,
  );
  const [searchParams, setSearchParams] = useSearchParams();
  const buttonStyle = {
    height: 48,
    width: "100%",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  };

  // Calculate height: base 620px, subtract 48px for each hidden service
  const calculatedHeight = 620 - hiddenServices * 64;

  const handleOrderTypeSelect = (selectedOrderType: OrderType) => {
    searchParams.set("orderType", selectedOrderType);
    setSearchParams(searchParams);
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("menu.orderTypes")}
      initialSnap={1}
      height={calculatedHeight}
      snapPoints={[calculatedHeight.toString()]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 16,
          margin: "16px 0",
        }}
      >
        {restaurant?.dineIn == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.DineIn ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.DineIn)}
          >
            {t("orderTypes.dine-in")}
          </Button>
        )}
        {restaurant?.delivery == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.Delivery ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.Delivery)}
          >
            {t("orderTypes.delivery")}
          </Button>
        )}
        {restaurant?.pickup == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.Pickup ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.Pickup)}
          >
            {t("orderTypes.pickup")}
          </Button>
        )}
        {restaurant?.gift == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.Gift ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.Gift)}
          >
            {t("orderTypes.gift")}
          </Button>
        )}
        {restaurant?.toRoom == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.ToRoom ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.ToRoom)}
          >
            {t("orderTypes.room")}
          </Button>
        )}
        {restaurant?.toOffice == true && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.ToOffice ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.ToOffice)}
          >
            {t("orderTypes.office")}
          </Button>
        )}
        {restaurant?.is_schedule_order_enabled == 1 && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={
              orderType === OrderType.ScheduledOrder ? "primary" : "default"
            }
            onClick={() => handleOrderTypeSelect(OrderType.ScheduledOrder)}
          >
            {t("orderTypes.scheduled_order")}
          </Button>
        )}
        {restaurant?.is_booking_enabled == 1 && (
          <Button
            icon={<NextIcon />}
            iconPlacement="end"
            style={buttonStyle}
            type={orderType === OrderType.Booking ? "primary" : "default"}
            onClick={() => handleOrderTypeSelect(OrderType.Booking)}
          >
            {t("orderTypes.booking")}
          </Button>
        )}
      </div>
    </ProBottomSheet>
  );
}
