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 theme from "../../../../theme";


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

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

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

  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 } variant={ variant } close={ handleClose } />
    </React.Fragment>
  );
}


export default Tariffs;