import { Box, Button } from "@mui/material";
import React, { useState } from "react";
import NewProductCategory from "./Components/NewLooping";
import NewProductCategoryTable from "./Components/NewLoopingTable";
import AddIcon from "@mui/icons-material/Add";
import TableViewIcon from "@mui/icons-material/TableView";
import { useStyles } from "../../theme/styles";

const Category: React.FC = () => {
  const classes = useStyles();
  const [showNewProduct, setShowNewProduct] = useState(false);
  const [isDataLoaded, setIsDataLoaded] = useState(false);

  const handleToggle = () => {
    setShowNewProduct(!showNewProduct);
  };

  const handleDataLoaded = () => {
    setIsDataLoaded(true);
  };

  return (
    <Box sx={{ p: 2 }} className={classes.indexBox}>
      {isDataLoaded && (
        <Box
          sx={{
            textAlign: "end",
          }}
        >
          <Button
            variant="contained"
            startIcon={
              showNewProduct ? (
                <TableViewIcon sx={{ fontSize: 40 }} />
              ) : (
                <AddIcon sx={{ fontSize: 40 }} />
              )
            }
            className={classes.indexButton}
            onClick={handleToggle}
          >
            {showNewProduct ? "Looping Table" : "Looping"}
          </Button>
        </Box>
      )}
      <Box sx={{ height: "40px" }} />{" "}
      {showNewProduct ? (
        <NewProductCategory />
      ) : (
        <NewProductCategoryTable onDataLoaded={handleDataLoaded} />
      )}
    </Box>
  );
};

export default Category;
