import { FC } from 'react';

import {
  useParticipantViewContext,
  hasVideo,
  hasScreenShare,
} from '@stream-io/video-react-sdk';

import { BaseVideoPlaceholderProps } from '@stream-io/video-react-sdk/dist/src/core/components/Video/BaseVideoPlaceholder';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuAvatar from '@material-hu/components/design-system/Avatar';

import useAudioLevel from 'src/pages/dashboard/videoCall/hooks/useAudioLevel';
import { CallLayout } from 'src/types/stream';
import { getInitials } from 'src/utils/userUtils';

type CustomVideoPlaceholderProps = BaseVideoPlaceholderProps & {
  layout?: CallLayout;
};

const CustomVideoPlaceholder: FC<CustomVideoPlaceholderProps> = props => {
  const { layout = CallLayout.GRID } = props;
  const { participant } = useParticipantViewContext();
  const theme = useTheme();

  const { audioLevel } = useAudioLevel(participant);

  const maxAudioLevelPadding = layout === CallLayout.SHARE_SCREEN ? 10 : 50;
  const avatarSize = layout === CallLayout.SHARE_SCREEN ? 'medium' : 'large';

  if (
    (hasVideo(participant) ||
      (hasScreenShare(participant) && layout === CallLayout.GRID)) &&
    !participant.pausedTracks?.length
  ) {
    return (
      <Stack
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <HuAvatar
          src={participant.image}
          text={getInitials(participant.name)}
          size={avatarSize}
        />
      </Stack>
    );
  }

  return (
    <Stack
      sx={{
        position: 'relative',
        background: theme.palette.base?.grey[800],
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 1,
      }}
    >
      <Stack
        sx={{
          borderRadius: '50%',
          border: audioLevel
            ? `1px solid ${theme.palette.base?.blueBrand[400]}`
            : `none`,
          background:
            'radial-gradient(50% 50% at 50% 50%, rgba(73, 107, 227, 0.6) 0%, rgba(73, 107, 227, 0.3) 25%, rgba(73, 107, 227, 0.24) 37.5%, rgba(73, 107, 227, 0.18) 50%)',
          padding: `${Math.min(audioLevel, maxAudioLevelPadding)}px`,
          transition: 'padding 0.250s ease-out',
        }}
      >
        <HuAvatar
          src={participant.image}
          text={getInitials(participant.name)}
          size={avatarSize}
        />
      </Stack>
    </Stack>
  );
};

export default CustomVideoPlaceholder;