import { type FC } from 'react';

import {
  CallingState,
  ParticipantView,
  type StreamVideoParticipant,
} from '@stream-io/video-react-sdk';
import { type AxiosResponse } from 'axios';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import {
  FullScreenElementType,
  type LiveStream,
  type LiveStreamPost,
  TrackType,
} from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { FULL_SCREEN_COMMENT_WIDTH } from '../../constants';
import CustomParticipantView from '../CustomParticipantView';
import CustomVideoPlaceholder from '../CustomVideoPlaceholder';
import type useVolume from '../hooks/useVolume';

import { Background } from '..';

export type PlayerContentProps = {
  callingState: CallingState;
  hostParticipant: StreamVideoParticipant | undefined;
  allowVolume: boolean;
  fullScreenElement: FullScreenElementType;
  toggleFullscreen: () => void;
  onClose: () => void;
  hasOngoingScreenshare: boolean;
  showControls: boolean;
  stream: LiveStream;
  post: LiveStreamPost;
  pollService?: {
    vote: (pollId: number, pollOptionId: number) => Promise<AxiosResponse>;
    key: Array<string | number>;
  };
  isCaptionsOpen: boolean;
  setIsCaptionsOpen: (open: boolean) => void;
  volumeHandlers: ReturnType<typeof useVolume>;
};

const PlayerContent: FC<PlayerContentProps> = props => {
  const {
    callingState,
    hostParticipant,
    allowVolume,
    fullScreenElement,
    toggleFullscreen,
    onClose,
    hasOngoingScreenshare,
    showControls,
    stream,
    post,
    pollService,
    isCaptionsOpen,
    setIsCaptionsOpen,
    volumeHandlers,
  } = props;

  const { t } = useLokaliseTranslation('livestream');
  const theme = useTheme();

  const isFullscreen = fullScreenElement !== FullScreenElementType.NONE;
  const backgroundSx = {
    width:
      fullScreenElement === FullScreenElementType.SEMI
        ? `calc(100% - ${FULL_SCREEN_COMMENT_WIDTH})`
        : '100%',
    height: isFullscreen ? '100vh' : undefined,
    borderRadius: isFullscreen ? 0 : undefined,
  };

  switch (callingState) {
    case CallingState.JOINING:
    case CallingState.UNKNOWN:
      return (
        <Background sx={backgroundSx}>
          <HuCircularProgress darkBackground />
        </Background>
      );
    case CallingState.RECONNECTING:
      return (
        <Background sx={backgroundSx}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color={theme.palette.new.text.neutral.inverted}
          >
            {t('RECONNECTING')}
          </Typography>
        </Background>
      );
    case CallingState.RECONNECTING_FAILED:
      return (
        <Background sx={backgroundSx}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color={theme.palette.new.text.neutral.inverted}
          >
            {t('RECONNECTING_ERROR')}
          </Typography>
        </Background>
      );
    case CallingState.LEFT:
      return (
        <Background sx={backgroundSx}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color={theme.palette.new.text.neutral.inverted}
          >
            {t('VIDEO_END')}
          </Typography>
          <Typography
            variant="globalXS"
            color={theme.palette.new.text.neutral.inverted}
          >
            {t('SOON_TO_SEE_STREAM')}
          </Typography>
        </Background>
      );
    case CallingState.JOINED:
      return hostParticipant ? (
        <ParticipantView
          muteAudio={!allowVolume}
          participant={hostParticipant}
          VideoPlaceholder={propsVideoPlaceholder => (
            <CustomVideoPlaceholder
              fullScreenElement={fullScreenElement}
              {...propsVideoPlaceholder}
            />
          )}
          trackType={
            hasOngoingScreenshare
              ? TrackType.SCREEN_SHARE_TRACK
              : TrackType.VIDEO_TRACK
          }
          ParticipantViewUI={
            <CustomParticipantView
              fullScreenElement={fullScreenElement}
              toggleFullscreen={toggleFullscreen}
              onClose={onClose}
              stream={stream}
              post={post}
              showControls={showControls}
              pollService={pollService}
              isCaptionsOpen={isCaptionsOpen}
              setIsCaptionsOpen={setIsCaptionsOpen}
              volumeHandlers={volumeHandlers}
            />
          }
        />
      ) : (
        <Background sx={backgroundSx}>
          <Typography
            variant="globalS"
            color={theme.palette.new.text.neutral.inverted}
          >
            {t('HOST_NOT_IN_CALL')}
          </Typography>
        </Background>
      );
    default:
      return (
        <Background sx={backgroundSx}>
          <HuCircularProgress darkBackground />
        </Background>
      );
  }
};

export default PlayerContent;