web-menu-react-version-/src/components/CustomBottomSheet/TablesBottomSheet.tsx

import Circle4PeopleIcon from "components/Icons/tables/Circle4PeopleIcon";
import Rectangle6PeopleIcon from "components/Icons/tables/Rectangle6PeopleIcon";
import Square4PeopleIcon from "components/Icons/tables/Square4PeopleIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import styles from "./CustomBottomSheet.module.css";

interface TablesBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: string;
  onSave: (value: string) => void;
}

export function TablesBottomSheet({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: TablesBottomSheetProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const handleSave = () => {
    onSave(value);
    onClose();
  };

  const handleCancel = () => {
    setValue(initialValue);
    onClose();
  };

  const tableList = [
    {
      id: 1,
      name: "Table 1",
      value: "table1",
      shape: "rectangle",
      number: 6,
      is_booked: true,
    },
    {
      id: 2,
      name: "Table 2",
      value: "table2",
      shape: "square",
      number: 4,
      is_booked: false,
    },
    {
      id: 3,
      name: "Table 3",
      value: "table3",
      shape: "circle",
      number: 4,
      is_booked: false,
    },
    {
      id: 4,
      name: "Table 4",
      value: "table4",
      shape: "rectangle",
      number: 6,
      is_booked: false,
    },
    {
      id: 5,
      name: "Table 5",
      value: "table5",
      shape: "rectangle",
      number: 6,
      is_booked: false,
    },
    {
      id: 6,
      name: "Table 6",
      value: "table6",
      shape: "rectangle",
      number: 6,
      is_booked: false,
    },
    {
      id: 7,
      name: "Table 7",
      value: "table7",
      shape: "square",
      number: 4,
      is_booked: false,
    },
    {
      id: 8,
      name: "Table 8",
      value: "table8",
      shape: "square",
      number: 4,
      is_booked: false,
    },
    {
      id: 9,
      name: "Table 9",
      value: "table9",
      shape: "circle",
      number: 4,
      is_booked: false,
    },
    {
      id: 10,
      name: "Table 10",
      value: "table10",
      shape: "circle",
      number: 4,
      is_booked: false,
    },
  ];

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("cart.tables")}
      showCloseButton={false}
      initialSnap={1}
      height={"70vh"}
      snapPoints={["70vh"]}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 20,
          columnGap: 20,
        }}
      >
        {tableList.map((table) => {
          if (table.shape === "rectangle") {
            return (
              <div
                key={table.id}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                }}
                onClick={handleSave}
              >
                <Rectangle6PeopleIcon
                  title={table.name}
                  timer={
                    table.is_booked ? table.number.toFixed(2).toString() : ""
                  }
                  className={styles.bookedStyles}
                  fill={table.is_booked ? "#FFE299" : "#C8E6A9"}
                />
              </div>
            );
          } else if (table.shape === "square") {
            return (
              <div
                key={table.id}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                }}
                onClick={handleSave}
              >
                <Square4PeopleIcon
                  title={table.name}
                  timer={
                    table.is_booked ? table.number.toFixed(2).toString() : ""
                  }
                  className={styles.bookedStyles}
                  fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
                />
              </div>
            );
          } else if (table.shape === "circle") {
            return (
              <div
                key={table.id}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                }}
                onClick={handleSave}
              >
                <Circle4PeopleIcon
                  title={table.name}
                  timer={
                    table.is_booked ? table.number.toFixed(2).toString() : ""
                  }
                  className={styles.bookedStyles}
                  fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
                />
              </div>
            );
          }
        })}
      </div>
    </ProBottomSheet>
  );
}