import { Box, Button, Grid2 as Grid, LinearProgress, TextField, Typography } from "@mui/material";
import ContractSettings from "contract/contractSettings";
import ContractsList from "contract/contractList";
import { Contract } from "models/Contract";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
import { useContractAPI, useGlobalState } from "providers";
// import { useContractAPI } from "providers/pond/contractAPI";
import { useEffect, useState } from "react";
import PageContainer from "./PageContainer";

export default function Contracts() {
  const [openSettings, setOpenSettings] = useState(false);
  const [{ as }] = useGlobalState()
  const contractAPI = useContractAPI();
  const [contracts, setContracts] = useState<Contract[]>([]);
  const [loading, setLoading] = useState(false);
  //const [{ backgroundTasksComplete }] = useGlobalState();
  const [contractPermissions, setContractPermissions] = useState<Map<string, pond.Permission[]>>(
    new Map()
  );
  const [year, setYear] = useState(moment().format("YYYY"));

  useEffect(() => {
    if (!loading) {
      setLoading(true);
      contractAPI
        .listContractsByYear(
          0,
          0,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          year,
          as
        )
        .then(resp => {
          let contracts: Contract[] = [];
          let contractPermissions: Map<string, pond.Permission[]> = new Map();
          resp.data.contracts.forEach(contract => {
            let c = Contract.create(contract);
            contracts.push(c);
            let p = pond.EvaluatePermissionsResponse.fromObject(
              resp.data.contractPermissions[c.key()]
            );
            contractPermissions.set(c.key(), p.permissions);
          });
          setContracts(contracts);
          setContractPermissions(contractPermissions);
          setLoading(false);
        })
        .catch(err => {});
    }
  }, [contractAPI, year, as]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <PageContainer>
      <Box padding={2}>
        <Typography style={{ fontSize: 25, fontWeight: 650 }}>Contracts</Typography>
        <Grid
          container
          direction="row"
          justifyContent="space-between"
          alignContent="center"
          alignItems="center">
          <Grid>
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                setOpenSettings(true);
              }}>
              Add Contract
            </Button>
          </Grid>
          <Grid>
            <TextField
              variant="outlined"
              fullWidth
              label="Contract Year"
              value={year}
              InputLabelProps={{ shrink: true }}
              onChange={e => setYear(e.target.value)}
            />
          </Grid>
        </Grid>
      </Box>
      {!loading ? (
        <ContractsList
          contracts={contracts}
          contractPermissions={contractPermissions}
          updateList={c => {
            setContracts([...c]);
          }}
        />
      ) : (
        <LinearProgress />
      )}
      <ContractSettings
        open={openSettings}
        close={() => {
          setOpenSettings(false);
        }}
      />
    </PageContainer>
  );
}
