import React from 'react';
import {useTranslation} from 'react-i18next';
import {useQuery} from 'react-query';
import {Navigation} from '@interfaces/navigation';
import {CallProvider} from '@modules/calls/components/CallProvider';
import {CALLS_QUERY_KEYS} from '@modules/calls/constants';
import {getCall} from '@modules/calls/services';
import {CallConnectionFeedback} from '@modules/calls/components/CallConnectionFeedback';
import {CallContainer} from '@modules/calls/components/CallContainer';
import {isCallEnded} from '@modules/calls/utils';
import {CallEnded} from '@modules/calls/components/CallEnded';
import {Screens} from '@shared/constants';

export function CallScreen({
  route: {
    params: {callId, isCaller, externalCallId, initialCameraEnabled},
  },
}: Navigation<Screens.CALLS_CALL>) {
  const {t} = useTranslation();
  const {data: call, isError} = useQuery(CALLS_QUERY_KEYS.call(callId), () =>
    getCall({id: callId}),
  );
  const callEnded = isCallEnded(call);

  const joinedFromLink = !!externalCallId;

  if (callEnded) {
    if (joinedFromLink) {
      return <CallEnded />;
    }
    return <CallConnectionFeedback isError errorText={t('calls.call_ended')} />;
  }

  if (call) {
    return (
      <CallProvider
        call={call}
        isCaller={isCaller}
        joinedFromLink={joinedFromLink}
        initialCameraEnabled={initialCameraEnabled}>
        <CallContainer call={call} isCaller={isCaller} />
      </CallProvider>
    );
  }

  if (isError) {
    const errorText = isCaller
      ? t('calls.errors.call_creation')
      : t('calls.errors.call_join');
    return <CallConnectionFeedback isError errorText={errorText} />;
  }

  return <CallConnectionFeedback isLoading />;
}