import {
  Button,
  Checkbox,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControlLabel,
  FormGroup,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import { useAppSelector } from "../../redux/hooks";
import { selectFavorites } from "../../redux/slices/favoritesSlice";
import { selectTeam, selectUsers } from "../../redux/slices/usersSlice";
import GroupSelect from "../sidebar/GroupSelect";
import { SidebarUserObj } from "./Home";

interface Props {
  open: boolean;
  selectedValue: SidebarUserObj;
  onClose: (value: SidebarUserObj) => void;
  users: SidebarUserObj[];
}

const CallFavouritesDialog: React.FC<Props> = ({
  open,
  selectedValue,
  onClose,
  users,
}: Props) => {
  const handleClose = () => {
    onClose(selectedValue);
  };
  console.log(users);

  const [group, setGroup] = useState<string>("Favorites");
  const [inputText, setInputText] = useState<string>("");
  const [checkedUuids, setCheckedUuids] = useState<string[]>([]);

  const handleCheck = (uuid: string, checked: boolean) => {
    if (checked) {
      setCheckedUuids(checkedUuids.concat([uuid]));
    } else {
      setCheckedUuids(checkedUuids.filter((id) => id != uuid));
    }
  };

  const handleGroupChange = () => {
    setCheckedUuids([]);
  };

  const favoritesUuids = useAppSelector(selectFavorites);
  const teamUuids = useAppSelector(selectTeam);

  const groupMembersUuids: string[] =
    group === "Favorites" ? favoritesUuids : teamUuids;
  const groupMembers = useAppSelector((state) =>
    selectUsers(state, groupMembersUuids)
  );

  return (
    <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
      <DialogTitle>Select who to call:</DialogTitle>
      <DialogContent>
        <GroupSelect
          group={group}
          setGroup={setGroup}
          onGroupChange={handleGroupChange}
        />
      </DialogContent>
      <DialogContent sx={{ height: "40vh" }} dividers>
        <TextField
          label="Search"
          variant="outlined"
          placeholder="Person"
          fullWidth
          sx={{ pb: 1 }}
          onChange={(e) => {
            setInputText(e.target.value);
          }}
        />
        <FormGroup>
          {groupMembers
            .filter((member) =>
              member.name.toLowerCase().includes(inputText.toLowerCase())
            )
            .map((member) => (
              <FormControlLabel
                key={member.uuid}
                label={member.name}
                sx={{ pl: 1 }}
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                onChange={(e: any) => {
                  handleCheck(member.uuid, e.target.checked);
                }}
                control={
                  <Checkbox
                    color="success"
                    checked={checkedUuids.includes(member.uuid)}
                  />
                }
              />
            ))}
        </FormGroup>
      </DialogContent>

      <DialogActions>
        <Button color="success" onClick={handleClose}>
          <Typography variant="button" color="black">
            Call
          </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CallFavouritesDialog;