import { useEffect } from 'react';
import { useMutation } from 'react-query';

import { CallingState, useCallStateHooks } from '@stream-io/video-react-sdk';

import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import { tokenManager } from 'src/config/tokens';
import { endCall } from 'src/services/streaming';
import { CallMode } from 'src/types/stream';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

const allowedStatesToEndCall = [
  CallingState.JOINING,
  CallingState.JOINED,
  CallingState.RINGING,
];

const useLeaveCallBeforeUnload = (callId: string, showRingingView: boolean) => {
  const { accessToken } = tokenManager.getCorrectToken();
  const { t } = useTranslation('errors');
  const { enqueueSnackbar } = useHuSnackbar();
  const {
    useCallCustomData,
    useCallState,
    useCallCallingState,
    useParticipants,
    useLocalParticipant,
  } = useCallStateHooks();
  const { type } = useCallCustomData();
  const { endedAt } = useCallState();
  const callingState = useCallCallingState();
  const participants = useParticipants();
  const localParticipant = useLocalParticipant();

  const currentUserSessions = participants.filter(
    p => p.userId === localParticipant?.userId,
  ).length;

  const isLastParticipant = participants.length === 1;

  const { mutate: endCallMutation } = useMutation(
    () => {
      return endCall(callId, accessToken);
    },
    {
      onError: () => {
        enqueueSnackbar({ title: t('error'), variant: 'error' });
      },
    },
  );

  useEffect(() => {
    const handleBeforeUnload = () => {
      if (
        (!type || type === CallMode.SINGLE || isLastParticipant) &&
        !endedAt &&
        (allowedStatesToEndCall.includes(callingState) || showRingingView) && // showRingingView is a workaround because stream is not updating the calling state properly
        currentUserSessions <= 1 // to avoid end call when a user is in a call with multiple sessions and leaves one of them
      ) {
        endCallMutation();
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [
    type,
    endedAt,
    callingState,
    currentUserSessions,
    isLastParticipant,
    showRingingView,
    endCallMutation,
  ]);
};

export default useLeaveCallBeforeUnload;