import { Button } from "antd";
import ArabicPrice from "components/ArabicPrice";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { selectCart } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import styles from "../../address/address.module.css";

export default function BriefMenu() {
  const { tables, items } = useAppSelector(selectCart);
  const { t } = useTranslation();
  const { orderType } = useAppSelector(selectCart);
  const { subdomain } = useParams();

  const menuItems = useMemo(
    () =>
      items.map((item, index) => (
        <div key={item.id}>
          <div className={styles.briefMenuItem}>
            <Button
              type="text"
              shape="circle"
              className={styles.quantityButton}
            >
              {index + 1}X
            </Button>
            <div>
              <ProText className={styles.itemName}>{item.name}</ProText>
              <br />
              <ArabicPrice price={item.price} type="secondary" />
            </div>
          </div>
        </div>
      )),
    [items],
  );

  const cardTitle = useMemo(
    () =>
      orderType === OrderType.DineIn || orderType === OrderType.Pay
        ? t("checkout.table") + " " + tables
        : t("checkout.items"),
    [orderType, t, tables],
  );

  return (
    <ProInputCard
      title={cardTitle}
      titleRight={
        orderType === OrderType.Pay ? (
          <Link to={`/${subdomain}/menu?orderType=${OrderType.Pay}`} style={{ textDecoration: "none" }}>
            <ProText style={{ color: colors.primary }}>
              {t("menu.title")}
            </ProText>
          </Link>
        ) : undefined
      }
    >
      <div className={styles.briefMenuContainer}>{menuItems}</div>
    </ProInputCard>
  );
}