import {
  Button,
  Checkbox,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  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 axios from "../../api/axios";
import useAuth from "../../hooks/useAuth";
import DetailedMeeting from "../../api-bodies/DetailedMeeting";
import NewMeeting from "../../api-bodies/NewMeeting";

interface Props {
  open: boolean;
  handleClose: () => void;
}

const CallFavouritesDialog: React.FC<Props> = ({
  open,
  handleClose,
}: Props) => {

  const [group, setGroup] = useState<string>("Favorites");
  const [inputText, setInputText] = useState<string>("");
  const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
  const [urlDialog, seturlDialog] = useState({ open: false, url: "" });

  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)
  );

  const auth = useAuth();

  const handleCall = async(e: React.SyntheticEvent) => {
    const start = new Date().toISOString();
    let newStart = start.split('.')[0];
    newStart += start.includes("Z") ? "Z" : "";
    const newMeeting: NewMeeting ={
      startTime: newStart,
      duration: 60,
      topic: "Quick Call to Group",
      registrantIds: checkedUuids
    };
    const response = await axios.post(
      `/users/${auth?.uuid}/meetings`,
      JSON.stringify(newMeeting)
    );
    const meeting: DetailedMeeting = response?.data;
    console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
    seturlDialog({ open: true, url: meeting.joinUrl });
    handleClose();
  };

  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={handleCall}>
            <Typography variant="button" color="black">
              Call
            </Typography>
          </Button>
        </DialogActions>
      </Dialog>
        <Dialog
          open={urlDialog.open}
          onClose={() => {
            seturlDialog({ open: false, url: "" });
          }}
        >
          <DialogTitle>Join</DialogTitle>
          <DialogContent>
            <DialogContentText>{urlDialog.url}</DialogContentText>
          </DialogContent>
        </Dialog>
    </>
  );
};

export default CallFavouritesDialog;