import { FC } from 'react';

import {
  useParticipantViewContext,
  type VideoPlaceholderProps,
} from '@stream-io/video-react-sdk';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { FullScreenElementType } from 'src/types/stream';
import { getInitials } from 'src/utils/userUtils';

import { FULL_SCREEN_COMMENT_WIDTH } from '../constants';

type CustomVideoPlaceholderProps = VideoPlaceholderProps & {
  isConnectSoftwareStreaming?: boolean;
  fullScreenElement?: FullScreenElementType;
};

const CustomVideoPlaceholder: FC<CustomVideoPlaceholderProps> = props => {
  const {
    style,
    isConnectSoftwareStreaming = false,
    fullScreenElement,
  } = props;
  const { participant } = useParticipantViewContext();

  return (
    <Stack
      className="video-placeholder"
      style={style}
      sx={{
        background: theme => theme.palette.new.background.elements.inverted,
        width:
          fullScreenElement === FullScreenElementType.SEMI
            ? `calc(100% - ${FULL_SCREEN_COMMENT_WIDTH})`
            : '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius:
          fullScreenElement === FullScreenElementType.SEMI ||
          fullScreenElement === FullScreenElementType.FULL
            ? 0
            : 2,
      }}
    >
      {!isConnectSoftwareStreaming && (
        <Stack sx={{ alignItems: 'center', gap: 1.5 }}>
          <HuAvatar
            src={participant.image}
            text={getInitials(participant.name)}
            sx={{
              // design team are using a sizing that is not included in the DS
              '&.MuiAvatar-root': {
                width: 100,
                height: 100,
                svg: {
                  width: 50,
                  height: 50,
                },
              },
              '&.MuiAvatar-root > span.MuiTypography-root': {
                fontSize: '24px',
              },
            }}
          />
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.neutral.inverted"
            sx={{ textShadow: '0 1px 8px #AAAABA73' }}
          >
            {participant.name}
          </Typography>
        </Stack>
      )}
    </Stack>
  );
};
export default CustomVideoPlaceholder;