import { useEffect, useState } from 'react';
import Modal from '../../../components/common/Modal/Modal';
import { Box, Button, CircularProgress } from '@mui/material';
import { SspApi } from '../../../api/ssp';
import { UsersApi } from '../../../api/users';
import { toast } from 'react-toastify';
import { AutocompleteForChangeOptions } from '../components/AutocompleteForChangeOptions';

export const ModalChangeUsersInSsp = ({
  open,
  onClose,
  ssp,
  onUsersCountChange,
}) => {
  const [users, setUsers] = useState([]);
  const [usersDataForUpdate, setUsersDataForUpdate] = useState({
    update: [],
    delete: [],
  });
  const [allUsers, setAllUsers] = useState([]);
  const [loadingUsers, setLoadingUsers] = useState(false);

  useEffect(() => {
    UsersApi.getAll()
      .then((data) => {
        if (data.success) {
          setAllUsers(data.result);
          return;
        }
        toast.error('Ошибка получения всех пользователей ' + data.message);
      })
      .catch(() => {
        toast.error('Ошибка получения всех пользователей');
      });
  }, []);

  useEffect(() => {
    if (!open) {
      setUsers([]);
      setUsersDataForUpdate({ update: [], delete: [] });
      setLoadingUsers(false);
      return;
    }
    if (!ssp) return;

    setLoadingUsers(true);
    setUsers([]);
    setUsersDataForUpdate({ update: [], delete: [] });

    SspApi.getSsp(ssp.id, { load_users: true })
      .then((data) => {
        if (data.success) {
          setUsers(data.result?.users ?? []);
          return;
        }
        toast.error('Ошибка получания пользователей ' + data.message);
      })
      .catch(() => {
        toast.error('Ошибка получания пользователей');
      })
      .finally(() => {
        setLoadingUsers(false);
      });
  }, [open, ssp]);

  const deleteUserFromSsp = async (user) => {
    try {
      const data = await SspApi.deleteManySsps(user.id, { ssp_ids: [ssp.id] });
      if (!data.success) {
        toast.error(data?.message || 'Ошибка удаления пользователя из ССП');
        return false;
      }
      return true;
    } catch (error) {
      const msg =
        error?.response?.data?.message || error?.response?.data?.detail;
      toast.error(msg || 'Ошибка удаления пользователя из ССП');
      return false;
    }
  };

  const addUserToSsp = async (user) => {
    try {
      const data = await SspApi.putManySsps(user.id, { ssp_ids: [ssp.id] });
      if (!data.success) {
        toast.error(data?.message || 'Ошибка добавления пользователя');
        return false;
      }
      return true;
    } catch (error) {
      const msg =
        error?.response?.data?.message || error?.response?.data?.detail;
      toast.error(msg || 'Ошибка добавления пользователя');
      return false;
    }
  };

  const handleClickSave = async () => {
    let added = 0;
    let removed = 0;

    for (const user of usersDataForUpdate.update) {
      if (await addUserToSsp(user)) {
        added += 1;
      }
    }

    for (const user of usersDataForUpdate.delete) {
      if (await deleteUserFromSsp(user)) {
        removed += 1;
      }
    }

    const delta = added - removed;
    if (delta !== 0) {
      onUsersCountChange?.(ssp.id, delta);
    }

    onClose?.();
  };

  const handleChangeUsersList = (updater) => {
    setUsersDataForUpdate(updater);
  };

  if (!ssp) return;
  return (
    <Modal
      title={'Редактировать список пользователей'}
      open={open}
      onClose={onClose}
      customSize={31.25}
      actions={
        <>
          <Button variant="grey" onClick={onClose} style={{ height: '2.5rem' }}>
            Отменить
          </Button>
          <Button
            variant="contained"
            onClick={handleClickSave}
            disabled={loadingUsers}
            style={{ height: '2.5rem' }}
          >
            Сохранить
          </Button>
        </>
      }
    >
      <Box maxHeight={'max-content'} minHeight="8rem">
        {loadingUsers ? (
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              minHeight: '8rem',
            }}
          >
            <CircularProgress size={32} />
          </Box>
        ) : (
          <AutocompleteForChangeOptions
            options={allUsers}
            values={users}
            onChange={handleChangeUsersList}
            label="Пользователи"
          />
        )}
      </Box>
    </Modal>
  );
};
