import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import {
  Button,
  Checkbox,
  FormControlLabel,
  Grid,
  Typography,
} from "@mui/material";
import { avicultureGetGivePermissionService } from "../../services/aviculture-get-give-permission";
import { avicultureGivePermissionService } from "../../services/aviculture-give-permission";
import { SPACING } from "../../../../data/spacing";

const styles = {
  root: {
    padding: 20,
    textAlign: "left",
    boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
    borderRadius: 8,
    backgroundColor: "#fff",
  },
  heading: {
    textAlign: "right",
    borderBottom: "2px solid #ccc",
    paddingBottom: SPACING.SMALL,
    marginBottom: SPACING.SMALL,
  },
  checkboxContainer: {
    display: "flex",
    justifyContent: "flex-start",
    marginBottom: SPACING.SMALL,
  },
  checkbox: {
    marginLeft: SPACING.SMALL,
  },
  button: {
    marginTop: SPACING.SMALL,
  },
};

export const AvicultureGivePermission = () => {
  const dispatch = useDispatch();
  const [checkbox1, setCheckbox1] = useState(false);
  const [checkbox2, setCheckbox2] = useState(false);

  const handleCheckbox1Change = (event) => {
    setCheckbox1(event.target.checked);
  };

  const handleCheckbox2Change = (event) => {
    setCheckbox2(event.target.checked);
  };

  useEffect(() => {
    dispatch(avicultureGetGivePermissionService()).then((r) => {
      if (r?.payload?.data?.length) {
        setCheckbox1(r.payload.data[0]?.city);
        setCheckbox2(r.payload.data[0]?.province);
      } else {
        setCheckbox1(false);
        setCheckbox2(false);
      }
    });
  }, [dispatch]);

  return (
    <Grid container style={styles.root} direction="column">
      <Typography variant="h6" gutterBottom style={styles.heading}>
        اجازه دسترسی
      </Typography>
      <Grid style={styles.checkboxContainer}>
        <FormControlLabel
          control={
            <Checkbox
              checked={checkbox1}
              onChange={handleCheckbox1Change}
              color="primary"
            />
          }
          label={
            <Typography style={styles.checkbox}>
              دادن وکالت به شهرستان جهت ثبت درخواست کشتار
            </Typography>
          }
        />
      </Grid>
      <Grid style={styles.checkboxContainer}>
        <FormControlLabel
          control={
            <Checkbox
              checked={checkbox2}
              onChange={handleCheckbox2Change}
              color="primary"
            />
          }
          label={
            <Typography style={styles.checkbox}>
              دادن وکالت به استان جهت ثبت درخواست کشتار
            </Typography>
          }
        />
      </Grid>
      <Grid style={styles.button}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            dispatch(
              avicultureGivePermissionService({
                city: checkbox1,
                province: checkbox2,
              })
            );
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
