//import React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import Button from "@mui/material/Button";
import { Modal } from "@mui/material";

// table
import { DataGrid, renderEditInputCell } from "@mui/x-data-grid";
import { componentsJsonToDataGrid } from "../utils/tableUtils";
import { useEffect, useState } from "react";

let rows = [];
let columns = [];

const ModalComponents = ({
  handlerModal,
  stateModal,
  components,
  addIdComponentsForProduct,
}) => {
  const [componentsForProduct, setComponentsForProduct] = useState([]);

  useEffect(() => {
    const dataGrid = componentsJsonToDataGrid(components);
    rows = [];
    columns = [];
    rows.push(...dataGrid.rows);
    columns.push(...dataGrid.columns);
  }, [components]);

  return (
    <Modal
      open={stateModal}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          width: "80%",
          height: "80%",
          backgroundColor: "#23282C",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "center",
            width: "100%",
            overflow: "auto",
          }}
        >
          <div style={{ height: "50vh", width: "60vw" }}>
            <DataGrid
              columnVisibilityModel={{
                id: false,
                name: true,
                description: true,
                category: true,
              }}
              sx={{
                color: "whitesmoke",
              }}
              disableSelectionOnClick
              rows={rows}
              columns={columns}
              pageSize={7}
              rowsPerPageOptions={[7]}
              checkboxSelection={true}
              onSelectionModelChange={(selectionModel) => {
                setComponentsForProduct(selectionModel);
              }}
            />
          </div>
        </div>
        <Button
          sx={{
            marginTop: "2rem",
          }}
          variant="contained"
          color="primary"
          onClick={() => {
            addIdComponentsForProduct(componentsForProduct);
            handlerModal(false);
          }}
        >
          Agregar componentes
        </Button>
      </Box>
    </Modal>
  );
};

export default ModalComponents;