import * as React from "react";
import { Box } from "@mui/material";
import Templater from "./Templater";
import Quiz from "./Quiz";
import Contractor from "./Contractor";
import DataGridElement from "./DataGridElement";
import ModalMini from "./ModalMini";
import { ArrayProps } from "./types";
import useStore from "../../../../store";
import theme from "../../../../theme";


const Tariffs: React.FC = () =>  {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () =>    {   setOpen(true);    };
  const handleClose = () =>   {   setOpen(false);   };

  const [type, setType] = React.useState( 100 );
  const [variant, setVariant] = React.useState( 100 );
  const openModal = (type:number, num:number) =>  {   
    setType( type );
    setVariant( num );
    handleOpen();
  }

  const getData = localStorage.getItem("tariffs");
  let rows:Array<ArrayProps> = []; //useStore((state) => state.tariffsArray);
  const store = useStore( (state) => state );

  if( getData && !store.tariffsArray.length )   { 
    rows = JSON.parse(getData); 
    store.tariffsArraySet( rows );
  }

  return (
    <React.Fragment>
      <Box sx={{ 
        width: "90%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center"
      }}>
        <Templater openModal={ openModal } />
        <Quiz openModal={ openModal } />
        <Contractor openModal={ openModal } />
        <DataGridElement />
      </Box>

      <ModalMini open={ open } type={ type } variant={ variant } close={ handleClose } />
    </React.Fragment>
  );
}


export default Tariffs;