import { type FC, type ReactNode } from 'react';

import { type StreamVideoParticipant } from '@stream-io/video-react-sdk';
import { motion } from 'motion/react';
import Grid from '@material-hu/mui/Grid';

import { SPEAKER_INDICATOR_FADE_IN } from 'src/pages/dashboard/videoCall/constants';
import { getCallLayoutGridItemHeight } from 'src/pages/dashboard/videoCall/utils';

type CallLayoutGridItemProps = {
  children: ReactNode;
  gridColumns: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
  };
  maxParticipantsInView: number;
  providerParticipants: StreamVideoParticipant[];
  participant?: StreamVideoParticipant;
  enableLayoutAnimation?: boolean;
};

const CallLayoutGridItem: FC<CallLayoutGridItemProps> = props => {
  const {
    children,
    gridColumns,
    maxParticipantsInView,
    providerParticipants,
    participant,
    enableLayoutAnimation = false,
  } = props;

  const totalParticipants =
    providerParticipants.length > maxParticipantsInView
      ? maxParticipantsInView
      : providerParticipants.length;

  return (
    <Grid
      item
      xs={gridColumns.xs}
      sm={gridColumns.sm}
      md={gridColumns.md}
      lg={gridColumns.lg}
      sx={{
        display: 'flex',
        justifyContent: 'center',
        height: {
          xs: getCallLayoutGridItemHeight(
            totalParticipants,
            maxParticipantsInView / gridColumns.xs,
          ),
          sm: getCallLayoutGridItemHeight(
            totalParticipants,
            maxParticipantsInView / gridColumns.sm,
          ),
          md: getCallLayoutGridItemHeight(
            totalParticipants,
            maxParticipantsInView / gridColumns.md,
          ),
          lg: getCallLayoutGridItemHeight(
            totalParticipants,
            maxParticipantsInView / gridColumns.lg,
          ),
        },
        '& .str-video__participant-view': {
          position: 'relative',
          border: theme =>
            `1px solid ${
              participant?.isDominantSpeaker
                ? 'transparent'
                : theme.palette.newBase?.grey[600]
            }`,
          boxShadow: theme =>
            participant?.isDominantSpeaker
              ? `0 0 8px 0 ${theme.palette.new.shadows?.['8dp']}`
              : 'none',
          '&::after': participant?.isDominantSpeaker
            ? {
                content: '""',
                position: 'absolute',
                inset: '-1px',
                border: theme =>
                  `4px solid ${theme.palette.newBase?.brand[500]}`,
                borderRadius: 'inherit',
                pointerEvents: 'none',
                zIndex: 1,
                animation: `${SPEAKER_INDICATOR_FADE_IN} 0.25s ease-out`,
              }
            : undefined,
          '& .str-video__video': {
            borderRadius: 1,
          },
        },
      }}
    >
      <motion.div
        layout={enableLayoutAnimation}
        layoutId={enableLayoutAnimation ? participant?.sessionId : undefined}
        initial={enableLayoutAnimation ? { opacity: 0, scale: 0.9 } : false}
        animate={enableLayoutAnimation ? { opacity: 1, scale: 1 } : undefined}
        exit={enableLayoutAnimation ? { opacity: 0, scale: 0.9 } : undefined}
        transition={{
          layout: { type: 'spring', duration: 0.25, bounce: 0.1 },
        }}
        style={{ width: '100%', height: '100%', display: 'flex' }}
      >
        {children}
      </motion.div>
    </Grid>
  );
};

export default CallLayoutGridItem;