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

const Customer: React.FC = () => {
  const classes = useStyles();
  const [showNewCustomer, setShowNewCustomer] = useState(false);
  const [isDataLoaded, setIsDataLoaded] = useState(false);

  const handleToggle = () => {
    setShowNewCustomer(!showNewCustomer);
  };

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

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

export default Customer;
