import { type FC } from 'react';

import { type StreamVideoParticipant } from '@stream-io/video-react-sdk';
import { uniqBy } from 'lodash-es';
import { motion } from 'motion/react';
import { IconCopy, IconUsersGroup } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import useCopyUrl from 'src/hooks/useCopyUrl';
import { CALL_SNACKBAR_BOTTOM_SPACING } from 'src/pages/dashboard/videoCall/constants';
import { getParticipantNames } from 'src/pages/dashboard/videoCall/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const MotionStack = motion.create(Stack);

type CallHeaderProps = {
  handleShowParticipants: () => void;
  providerParticipants: StreamVideoParticipant[];
};

const CallHeader: FC<CallHeaderProps> = props => {
  const { handleShowParticipants, providerParticipants } = props;
  const { t } = useLokaliseTranslation('calls');
  const theme = useTheme();
  const { enqueueSnackbar } = useHuSnackbar();
  const { copyUrlToClipboard } = useCopyUrl();
  const uniqueProviderParticipants = uniqBy(providerParticipants, 'userId');
  const totalParticipants = uniqueProviderParticipants.length;

  const handleCopyUrl = () => {
    copyUrlToClipboard();
    enqueueSnackbar({
      title: t('copy_call_link_success'),
      variant: 'success',
      autoHideDuration: 3000,
      spacing: {
        bottom: CALL_SNACKBAR_BOTTOM_SPACING,
      },
    });
  };

  return (
    <MotionStack
      direction="row"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.3, ease: 'easeOut' }}
      sx={{
        width: '100%',
        background: 'linear-gradient(180deg, #000000b3, transparent)',
        justifyContent: 'space-between',
        alignItems: 'center',
        p: theme.spacing(3),
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: theme.spacing(1),
          cursor: 'pointer',
        }}
        onClick={handleShowParticipants}
      >
        <Stack
          sx={{
            color: theme.palette.new.text.neutral.default,
            background: theme.palette.new.background.elements.grey,
            borderRadius: '50%',
            p: '8px',
          }}
        >
          <IconUsersGroup />
        </Stack>
        <Stack
          sx={{
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'flex-start',
          }}
        >
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.neutral.inverted"
          >
            {t('PARTICIPANTS_COUNT', {
              count: totalParticipants,
            })}
          </Typography>
          <Typography
            variant="globalXS"
            color="new.text.neutral.inverted"
          >
            {getParticipantNames(uniqueProviderParticipants)}
          </Typography>
        </Stack>
      </Stack>
      <Tooltip
        direction="left"
        description={t('copy_call_link')}
      >
        <Stack
          sx={{ cursor: 'pointer' }}
          onClick={handleCopyUrl}
        >
          <IconCopy color={theme.palette.new.text.neutral.inverted} />
        </Stack>
      </Tooltip>
    </MotionStack>
  );
};

export default CallHeader;