import { Box } from "@mui/system";
import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTheme } from "@mui/material/styles";

import PageHeader from "../../components/PageHeader";
import CustomFileUpload from "../../components/CustomFileUpload";
import { MAX_FILE_SIZE_IN_MB, MAX_FILES } from "../../constants";
import { useStyles } from "./contractManagementStyles";
import { Grid, Paper } from "@mui/material";

const ContractManagement = () => {
  const classes = useStyles();
  const theme = useTheme();

  const formik = useFormik({
    initialValues: {
      companyPANImage: "",
    },
    validationSchema: Yup.object({
      companyPANImage: Yup.string().required("Required"),
    }),
    onSubmit: (values) => {
      console.log(values);
    },
  });

  const setUploadedFileUrl = () => {};

  return (
    <Box>
      <Paper
        className={classes.formRoot}
        sx={{ padding: theme.spacing(2), height: "70vh" }}
      >
        <PageHeader
          pageTitle="Contract Management"
          infiniteDropdown
          hideAddButton={true}
        />
        <Grid
          container
          spacing={theme.spacing(2.3)}
          padding={`0 ${theme.spacing(3.2)}`}
          className={classes.formRoot}
          sx={{ display: "flex", flexDirection: "column" }}
        >
          <Grid item md={4} sm={12} xs={12}>
            <CustomFileUpload
              label="Contract*"
              documentName="sd"
              onUploadDone={setUploadedFileUrl}
              maxFileSizeInMb={MAX_FILE_SIZE_IN_MB}
              maxFiles={MAX_FILES}
              uploadedFileUrl={formik.values.companyPANImage}
              errorMessage={
                formik.errors.companyPANImage && formik.touched.companyPANImage
                  ? formik.errors.companyPANImage
                  : ""
              }
            />
          </Grid>
        </Grid>
      </Paper>
    </Box>
  );
};

export default ContractManagement;
