import { ScheduleFilled } from "@ant-design/icons";
import { Card } from "antd";
import BackIcon from "components/Icons/BackIcon";
import BookingIcon from "components/Icons/BookingIcon";
import DeliveryIcon from "components/Icons/DeliveryIcon";
import DineInIcon from "components/Icons/DineInIcon";
import NextIcon from "components/Icons/NextIcon";
import PickupIcon from "components/Icons/PickupIcon";
import SendGiftIcon from "components/Icons/SendGiftIcon";
import ToOfficeIcon from "components/Icons/ToOfficeIcon";
import ToRoomIcon from "components/Icons/ToRoomIcon";
import ProTitle from "components/ProTitle";
import { updateOrderType } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "./restaurant.module.css";

interface RestaurantServicesProps {
  dineIn?: boolean;
  pickup?: boolean;
  gift?: boolean;
  delivery?: boolean;
  toRoom?: boolean;
  toOffice?: boolean;
  is_booking_enabled?: boolean;
  params: { locale: string; id: string };
}

export default function RestaurantServices({
  dineIn,
  pickup,
  gift,
  delivery,
  toRoom,
  toOffice,
  is_booking_enabled,
}: RestaurantServicesProps) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const dispatch = useAppDispatch();

  const services = [
    ...((dineIn && [
      {
        id: OrderType.DineIn,
        title: t("common.dineIn"),
        description: t("home.services.dineIn"),
        icon: (
          <DineInIcon
            className={styles.serviceIcon + " " + styles.dineInIcon}
          />
        ),
        color: "bg-blue-50 text-blue-600",
        href: `/${subdomain}/menu?orderType=${OrderType.DineIn}`,
      },
    ]) ||
      []),
    ...((pickup && [
      {
        id: OrderType.Pickup,
        title: t("common.pickup"),
        description: t("home.services.pickup"),
        icon: (
          <PickupIcon
            className={styles.serviceIcon + " " + styles.pickupIcon}
          />
        ),
        color: "bg-green-50 text-green-600",
        href: `/${subdomain}/menu?orderType=${OrderType.Pickup}`,
      },
    ]) ||
      []),
    ...((gift && [
      {
        id: OrderType.Gift,
        title: t("common.sendGift"),
        description: t("home.services.gift"),
        icon: (
          <SendGiftIcon
            className={styles.serviceIcon + " " + styles.giftIcon}
          />
        ),
        color: "bg-pink-50 text-pink-600",
        href: `/${subdomain}/menu?orderType=${OrderType.Gift}`,
      },
    ]) ||
      []),
    ...((toRoom && [
      {
        id: OrderType.ToRoom,
        title: t("common.roomService"),
        description: t("home.services.room"),
        icon: (
          <ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
        ),
        color: "bg-purple-50 text-purple-600",
        href: `/${subdomain}/menu?orderType=${OrderType.ToRoom}`,
      },
    ]) ||
      []),
    ...((toOffice && [
      {
        id: OrderType.ToOffice,
        title: t("common.officeDelivery"),
        description: t("home.services.office"),
        icon: (
          <ToOfficeIcon
            className={styles.serviceIcon + " " + styles.officeIcon}
          />
        ),
        color: "bg-orange-50 text-orange-600",
        href: `/${subdomain}/menu?orderType=${OrderType.ToOffice}`,
      },
    ]) ||
      []),
    ...((is_booking_enabled && [
      {
        id: OrderType.Booking,
        title: t("common.tableBooking"),
        description: t("home.services.booking"),
        icon: (
          <BookingIcon
            className={styles.serviceIcon + " " + styles.bookingIcon}
          />
        ),
        color: "bg-indigo-50 text-indigo-600",
        href: `/${subdomain}/menu?orderType=${OrderType.Booking}`,
      },
    ]) ||
      []),
    ...((delivery && [
      {
        id: OrderType.Delivery,
        title: t("common.delivery"),
        description: t("home.services.delivery"),
        icon: (
          <DeliveryIcon
            className={styles.serviceIcon + " " + styles.deliveryIcon}
          />
        ),
        color: "bg-indigo-50 text-indigo-600",
        href: `/${subdomain}/address`,
      },
    ]) ||
      []),
      ...((true && [
        {
          id: OrderType.ScheduledOrder,
          title: t("common.scheduledOrder"),
          description: t("home.services.scheduledOrder"),
          icon: (
            <ScheduleFilled
              className={styles.serviceIcon + " " + styles.scheduledOrderIcon}
            />
          ),
          color: "bg-indigo-50 text-indigo-600",
          href: `/${subdomain}/menu?orderType=${OrderType.ScheduledOrder}`,
        },
      ]) ||
        []),  
  ];

  // Determine grid class based on number of services
  const getGridClass = () => {
    const serviceCount = services.length;
    if (serviceCount <= 2) return `${styles.servicesGrid} ${styles.twoColumns}`;
    if (serviceCount >= 4)
      return `${styles.servicesGrid} ${styles.manyServices}`;
    return styles.servicesGrid;
  };

  return (
    <div className={getGridClass()}>
      {services?.map((s) => {
        return (
          <Link
            to={s?.href}
            key={s?.id}
            onClick={() => {
              dispatch(updateOrderType(s?.id));
            }}
            style={{
              width: "100%",
            }}
          >
            <Card className={styles.homeServiceCard}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                  width: "100%",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    gap: 12,
                  }}
                >
                  {s?.icon}
                  <ProTitle
                    level={5}
                    style={{
                      margin: 0,
                      fontSize: 14,
                      fontWeight: 600,
                    }}
                  >
                    {s?.title}
                  </ProTitle>
                </div>

                {isRTL ? (
                  <BackIcon className={styles.serviceIcon} />
                ) : (
                  <NextIcon className={styles.serviceIcon} />
                )}
              </div>
            </Card>
          </Link>
        );
      })}
    </div>
  );
}
