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

const Product: React.FC = () => {
  const classes = useStyles();
  const [showNewExpense, setShowNewExpense] = useState(false);
  const [isDataLoaded, setIsDataLoaded] = useState(false);

  const handleToggle = () => {
    setShowNewExpense(!showNewExpense);
  };

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

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

export default Product;
