import { Box, Divider, TextField, Typography, fabClasses } from "@mui/material";
import React, { useEffect, useState } from "react";
import Button from "../../components/shared/Button";
import { useFormik } from "formik";
import * as Yup from "yup";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import SwitchBox from "../../components/shared/SwitchBox";
import Placeholder from "../../components/shared/Placeholder";
import AddClassModal from "../../components/modals/AddClassToGradeModal";
import { addGrade, getGradeList } from "../../redux/reducers/gradeReducer";
import { useDispatch } from "react-redux";
import DataTable from "../../components/shared/DataTable";
import Pagination from "../../components/shared/Pagination";
import { useNavigate } from "react-router-dom";

const columns = [
  {
    name: "Class Name",
    selector: (row: any) => row.class_name,

    width: "40%",
  },
  {
    name: "Total No. of student",
    selector: (row: any) => row.class_numStudent ?? 0,

    width: "40%",
  },
  {
    name: "Status",
    selector: (row: any) => row.class_status,
    width: "7%",
  },
  {
    name: "Action",
    selector: (row: any) => row.action,

    width: "7%",
  },
];

const AddGrade = () => {
  // ------------ hooks --------------
  const [open, setOpen] = React.useState(false);
  const [addClasses, setAddClasses] = useState<any>([]);
  const [rows, setRows] = useState<any>([]);
  const navigate = useNavigate();
  const formik = useFormik({
    initialValues: {
      name: "",
      status: true,
    },
    validationSchema: Yup.object({}),
    onSubmit: async (values) => {},
  });
  const dispatch = useDispatch();

  // ------------ functions --------------
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  // ------------ useEffect --------------
  return (
    <>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          p: 3,
          bgcolor: "#fff",

          borderBottom: "1px solid #091E4224",
        }}
      >
        <Typography variant="h5">Add Grade</Typography>{" "}
        <Box
          sx={{
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <Button type="bordered" label="Cancel" onClick={() => navigate(-1)} />
          <Button
            onClick={async () => {
              try {
                await dispatch(
                  addGrade({
                    ...formik.values,
                    status: formik.values.status ? 1 : 0,
                    class_name: addClasses.map((item: any) => item.class_name),
                    class_numStudent: addClasses.map(
                      (item: any) => item.class_numStudent
                    ),
                  })
                ).unwrap();
                formik.resetForm();
                setAddClasses([]);
                navigate(-1);
              } catch (error) {
                console.log(error);
              }
            }}
            label="Submit"
            className="w-30 m-3"
          />
        </Box>
      </Box>
      <Box
        sx={{
          m: 4,
          bgcolor: "#fff",
          border: "1px solid #091E4224",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <Typography
            component={"p"}
            sx={{ fontSize: "18px", fontWeight: "600", m: 3 }}
          >
            Basic information
          </Typography>
          <SwitchBox id={"status"} formik={formik} />
        </Box>
        <Divider />
        <Box
          sx={{
            display: "flex",
            flexDirection: "row",
            p: 3,
            gap: 3,
          }}
        >
          <Box sx={{ width: "100%" }}>
            <div className="flex flex-col gap-0 mb-4">
              <label className="text-sm font-semibold mb-1">
                Grade name <span className="text-red">*</span>
              </label>
              <TextField
                margin="normal"
                required
                fullWidth
                size="small"
                id="name"
                onChange={formik.handleChange}
                value={formik.values.name}
                name="name"
                placeholder="ex [KG1]"
                sx={{ margin: 0, padding: 0 }}
              />
            </div>
          </Box>
        </Box>
      </Box>
      <Box
        sx={{
          m: 4,
          bgcolor: "#fff",
          border: "1px solid #091E4224",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <Typography
            component={"p"}
            sx={{ fontSize: "18px", fontWeight: "600", m: 3 }}
          >
            Classes
          </Typography>
          <Button
            type="bordered"
            label="Add new class"
            className="m-4 mr-6"
            onClick={handleOpen}
            icon={AddCircleOutlineIcon}
          />
        </Box>
        <Divider />
        {rows?.length ? (
          <>
            <DataTable data={rows} columns={columns} />
            <Pagination
              from={1}
              to={rows.length}
              lastPage={Math.ceil(rows.length / 10)}
              currentPage={1}
              total={rows.length}
              perPage={10}
            />
          </>
        ) : (
          <Placeholder name="Classes" />
        )}
      </Box>
      <AddClassModal
        addClasses={addClasses}
        setAddClasses={setAddClasses}
        open={open}
        onClose={handleClose}
      />
    </>
  );
};

export default AddGrade;