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 { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";

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

  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
        ? t("checkout.table") + " " + tables
        : t("checkout.items"),
    [orderType, t, tables],
  );

  return (
    <ProInputCard title={cardTitle}>
      <div className={styles.briefMenuContainer}>{menuItems}</div>
    </ProInputCard>
  );
}
