import styles from "pages/cart/cart.module.css";
import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
import {
  updateTables,
  removeTable,
  selectCart,
} from "features/order/orderSlice.ts";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { useAppSelector } from "redux/hooks.ts";
import { useTranslation } from "react-i18next";
import i18n from "i18n/i18n.ts";

// Function to get translated table names
export const getTableOptions = () => [
  { id: "1", name: `${i18n.t("checkout.table")} 1` },
  { id: "2", name: `${i18n.t("checkout.table")} 2` },
  { id: "3", name: `${i18n.t("checkout.table")} 3` },
  { id: "4", name: `${i18n.t("checkout.table")} 4` },
  { id: "5", name: `${i18n.t("checkout.table")} 5` },
  { id: "6", name: `${i18n.t("checkout.table")} 6` },
  { id: "7", name: `${i18n.t("checkout.table")} 7` },
  { id: "8", name: `${i18n.t("checkout.table")} 8` },
  { id: "9", name: `${i18n.t("checkout.table")} 9` },
  { id: "10", name: `${i18n.t("checkout.table")} 10` },
];

export default function TableNumberCard() {
  const { t } = useTranslation();
  const { tables } = useAppSelector(selectCart);
  return (
    <>
      <ProInputCard
        title={t("cart.tableNumber")}
        className={styles.tableNumberCard}
      >
        <ProInModalMultiSelect
          value={tables}
          placeholder={t("cart.tableNumber")}
          size="large"
          optionList={getTableOptions()}
          style={{
            width: "100%",
            height: 50,
            fontSize: 12,
          }}
          onSelect={(value) => {
            updateTables(value);
          }}
          onClear={() => {
            removeTable();
          }}
        />
      </ProInputCard>
    </>
  );
}
