import { type FC } from 'react';

import {
  IconPhone,
  IconUsersGroup,
  IconVideo,
  IconX,
} from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { type InitializationConfig, type Participant } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getInitials } from 'src/utils/userUtils';

export type IncomingCallModalProps = {
  creator: Participant;
  joinedUserNames?: string[];
  isGroupCall?: boolean;
  initializationConfig: InitializationConfig;
  onCancel: () => void;
  onAccept: () => void;
};

const IncomingCallModal: FC<IncomingCallModalProps> = props => {
  const {
    creator,
    joinedUserNames = [],
    isGroupCall = false,
    initializationConfig,
    onCancel,
    onAccept,
  } = props;
  const { t } = useLokaliseTranslation('calls');
  const theme = useTheme();

  const isCallStarted = joinedUserNames.length > 0;
  const { cameraEnabled } = initializationConfig;
  const modalContent = {
    avatarProps: {
      src:
        isCallStarted || !creator.profilePicture ? '' : creator.profilePicture,
      text: isCallStarted || isGroupCall ? '' : getInitials(creator.name),
      Icon: IconUsersGroup,
    },
    title: isCallStarted ? joinedUserNames.join(', ') : creator.name,
    label: cameraEnabled ? t('video_call') : t('audio_call'),
  };

  // For this component, design team used variants that don't exists in DS, so I had to override them with custom styles
  return (
    <Stack
      sx={{
        height: '100%',
        alignItems: 'center',
        justifyContent: 'space-around',
      }}
    >
      {creator && (
        <Stack sx={{ alignItems: 'center' }}>
          <HuAvatar
            {...modalContent.avatarProps}
            size="large"
            sx={{
              mb: theme.spacing(1.5),
              '&.MuiAvatar-root': {
                width: 100,
                height: 100,
                svg: {
                  width: 50,
                  height: 50,
                },
              },
              '&.MuiAvatar-root > span.MuiTypography-root': {
                fontSize: '24px',
              },
            }}
          />
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
            sx={{
              textAlign: 'center',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical',
            }}
          >
            {modalContent.title}
          </Typography>
          <Typography
            variant="globalS"
            color="new.text.neutral.lighter"
            sx={{ mb: theme.spacing(3) }}
          >
            {modalContent.label}
          </Typography>
        </Stack>
      )}
      <Stack sx={{ flexDirection: 'row', gap: theme.spacing(6) }}>
        <Stack sx={{ alignItems: 'center', gap: theme.spacing(0.5) }}>
          <IconButton
            sx={{
              flexDirection: 'column',
              background:
                theme.palette.new.action.button.background.error.default,
              borderRadius: '100%',
              width: 56,
              height: 56,
              svg: {
                stroke: theme.palette.new.text.neutral.inverted,
              },

              '&:hover': {
                background: theme.palette.base?.red[800],
                svg: {
                  stroke: theme.palette.new.text.neutral.inverted,
                },
              },
            }}
            onClick={onCancel}
          >
            <IconX color={theme.palette.new.text.neutral.inverted} />
          </IconButton>
          <Typography variant="globalXS">{t('REJECT_CALL')}</Typography>
        </Stack>
        <Stack sx={{ alignItems: 'center', gap: theme.spacing(0.5) }}>
          <IconButton
            sx={{
              flexDirection: 'column',
              background:
                theme.palette.new.action.button.background.success.default,
              borderRadius: '100%',
              width: 56,
              height: 56,
              svg: {
                stroke: theme.palette.new.text.neutral.inverted,
              },

              '&:hover': {
                background: theme.palette.base?.green[800],
                svg: {
                  stroke: theme.palette.new.text.neutral.inverted,
                },
              },
            }}
            onClick={onAccept}
          >
            {cameraEnabled && (
              <IconVideo color={theme.palette.new.text.neutral.inverted} />
            )}
            {!cameraEnabled && (
              <IconPhone color={theme.palette.new.text.neutral.inverted} />
            )}
          </IconButton>
          <Typography variant="globalXS">{t('ACCEPT_CALL')}</Typography>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default IncomingCallModal;