import React, { useEffect } from "react";
import {
  List,
  ListItem,
  ListItemText,
  Button,
  Checkbox,
  ListItemIcon,
  Paper,
  TextField,
  Typography,
} from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";

export const ProvinceAutoSelectOptions = ({ handleList }) => {
  function not(a, b) {
    return a.filter((value) => b.indexOf(value) === -1);
  }

  function intersection(a, b) {
    return a.filter((value) => b.indexOf(value) !== -1);
  }

  const [checked, setChecked] = React.useState([]);
  const [left, setLeft] = React.useState([
    { label: "شهر", key: "city", value: true },
    { label: "عدم بدهی", key: "no_debt", value: true },
    { label: "حداقل تعداد تخصیص", key: "minimum_allocation", value: true },
  ]);
  const [right, setRight] = React.useState([
    { label: "شهر محل کشتار", key: "kill_place", value: true },
  ]);

  const leftChecked = intersection(checked, left);
  const rightChecked = intersection(checked, right);

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  const handleAllRight = () => {
    setRight(right.concat(left));
    setLeft([]);
  };

  const handleCheckedRight = () => {
    setRight(right.concat(leftChecked));
    setLeft(not(left, leftChecked));
    setChecked(not(checked, leftChecked));
  };

  const handleCheckedLeft = () => {
    setLeft(left.concat(rightChecked));
    setRight(not(right, rightChecked));
    setChecked(not(checked, rightChecked));
  };

  const handleAllLeft = () => {
    setLeft(left.concat(right));
    setRight([]);
  };

  const handleChange = (event) => {
    const fieldToUpdateLeft = left.find(
      (item) => item.key === "minimum_allocation"
    );
    const fieldToUpdateRight = right.find(
      (item) => item.key === "minimum_allocation"
    );
    if (fieldToUpdateLeft) {
      setLeft((prevState) => [
        ...prevState.filter((item) => item.key !== "minimum_allocation"),
        { ...fieldToUpdateLeft, value: event.target.value },
      ]);
    } else if (fieldToUpdateRight) {
      setRight((prevState) => [
        ...prevState.filter((item) => item.key !== "minimum_allocation"),
        { ...fieldToUpdateRight, value: event.target.value },
      ]);
    }
  };

  useEffect(() => {
    handleList(right);
  }, [right]);

  const customList = (items) => (
    <Paper sx={{ width: "100%", height: 150, overflow: "auto" }}>
      <List dense component="div" role="list">
        {items.map((value, i) => {
          const labelId = `transfer-list-item-${value}-label`;
          return (
            <ListItem key={value} role="listitem" onClick={handleToggle(value)}>
              <Grid container alignItems="center">
                <ListItemIcon>
                  <Checkbox
                    checked={checked.indexOf(value) !== -1}
                    tabIndex={-1}
                    disableRipple
                    inputProps={{
                      "aria-labelledby": labelId,
                    }}
                  />
                </ListItemIcon>
                <ListItemText
                  id={labelId}
                  primary={`${i + 1}. ${value.label}`}
                />
                {value.label === "حداقل تعداد تخصیص" && (
                  <Grid>
                    <TextField
                      label="تعداد"
                      type={"number"}
                      style={{ width: "100px" }}
                      value={value.value}
                      onChange={handleChange}
                      size={"small"}
                    />
                  </Grid>
                )}
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </Paper>
  );

  return (
    <Grid
      container
      spacing={2}
      justifyContent="center"
      alignItems="center"
      mt={SPACING.TINY}
      width="100%"
    >
      <Grid item flex={1}>
        <Typography>انتخاب اولویت های تخصیص خودکار</Typography>
        {customList(left)}
      </Grid>
      <Grid item flex={1}>
        <Grid container direction="column" alignItems="center">
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="large"
            onClick={handleAllRight}
            // disabled={left.length === 0}
            disabled={true}
            aria-label="move all right"
          >
            ≫
          </Button>
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="large"
            onClick={handleCheckedRight}
            // disabled={leftChecked.length === 0}
            disabled={true}
            aria-label="move selected right"
          >
            &gt;
          </Button>
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="large"
            onClick={handleCheckedLeft}
            // disabled={rightChecked.length === 0}
            disabled={true}
            aria-label="move selected left"
          >
            &lt;
          </Button>
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="large"
            onClick={handleAllLeft}
            // disabled={right.length === 0}
            disabled={true}
            aria-label="move all left"
          >
            ≪
          </Button>
        </Grid>
      </Grid>
      <Grid item flex={1}>
        <Typography>اولویت های انتخاب شده تخصیص خودکار</Typography>
        {customList(right)}
      </Grid>
    </Grid>
  );
};
