import { Form, Select } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText";
import {
  removeTable,
  selectCart,
  updateTables,
} from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css";
import { OrderType } from "pages/checkout/hooks/types";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useGetTablesQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";

export default function TableNumberCard() {
  const { t } = useTranslation();
  const { table, orderType } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const [isEditing, setIsEditing] = useState(false);
  const { data: tableList } = useGetTablesQuery(
    {
      restaurantID: localStorage.getItem("restaurantID") || "",
      tableType: orderType === OrderType.DineIn ? "1" : "2",
    },
    {
      skip: !localStorage.getItem("restaurantID") || !orderType,
    },
  );

  const selectedTableName = useMemo(() => {
    if (!table || !tableList) return table;
    const foundTable = tableList.find((t: any) => t.id === table);
    return foundTable?.name || table;
  }, [table, tableList]);

  return (
    <>
      <ProInputCard
        title={
          orderType === OrderType.DineIn
            ? t("cart.tableNumber")
            : t("cart.selectCompany")
        }
        titleRight={
          orderType === OrderType.DineIn ? (
            <ProText
              onClick={() => setIsEditing(true)}
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#FFB700",
                cursor: "pointer",
              }}
            >
              {t("cart.changeTable")}
            </ProText>
          ) : undefined
        }
        className={styles.tableNumberCard}
      >
        {isEditing || table === "" ? (
          <Form.Item
            name="table"
            required
            rules={[
              {
                required: true,
                message:
                  orderType === OrderType.DineIn
                    ? t("cart.pleaseSelectTable")
                    : t("cart.pleaseSelectCompany"),
              },
            ]}
            initialValue={table}
          >
            <Select
              value={table}
              // mode="multiple"
              placeholder={
                orderType === OrderType.DineIn
                  ? t("cart.tableNumber")
                  : t("cart.selectCompany")
              }
              size="large"
              options={tableList?.map((table: any) => ({
                label: table.name,
                value: table.id,
              }))}
              style={{
                width: "100%",
                height: 50,
                fontSize: 12,
                borderRadius: 888,
              }}
              onChange={(value) => {
                dispatch(updateTables(value));
                if(value) setIsEditing(false);
              }}
              onClear={() => {
                dispatch(removeTable());
              }}
              allowClear
            />
          </Form.Item>
        ) : (
          <ProText
            style={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 18,
              lineHeight: "140%",
              letterSpacing: "0%",
            }}
          >
            {selectedTableName}
          </ProText>
        )}
      </ProInputCard>
    </>
  );
}
