import { type FC } from 'react';

import { IconPlayerPlay } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type SxProps, useTheme } from '@material-hu/mui/styles';

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

import {
  BUNNY_IMAGE_CLASSES,
  THUMBNAIL_SIZE,
} from 'src/pages/dashboard/Conversations/constants';
import {
  Format,
  type SendFileItem,
  type SendFilesList,
  type SendImagesType,
  type SendVideosType,
} from 'src/pages/dashboard/Conversations/types';

import LazySecureAwareImage from '../LazySecureAwareImage';
import LazySecureAwareVideo from '../LazySecureAwareVideo';

type CarrouselProps = {
  attachments: SendFilesList;
  selectedIndex: number;
  onSelectIndex: (index: number) => void;
  isSecure: boolean;
};

const Carrousel: FC<CarrouselProps> = ({
  attachments,
  selectedIndex,
  onSelectIndex,
  isSecure,
}) => {
  const theme = useTheme();

  const getThumbnailSx = (selected: boolean): SxProps => ({
    height: THUMBNAIL_SIZE,
    width: THUMBNAIL_SIZE,
    borderRadius: 1,
    objectFit: 'cover',
    overflow: 'hidden',
    cursor: 'pointer',
    border: selected
      ? `2px solid ${theme.palette.new.action.button.background.primary.default}`
      : '2px solid transparent',
  });

  const renderVideoThumbnail = (attachment: SendVideosType, index: number) => {
    const sxProps = getThumbnailSx(selectedIndex === index);

    if (attachment.thumb_url) {
      return (
        <>
          <LazySecureAwareImage
            isSecure={isSecure}
            url={attachment.thumb_url}
            alt={attachment.filename}
            sxSecure={sxProps}
            sxDefault={sxProps}
          />
          <Stack
            sx={{
              position: 'absolute',
              inset: 0,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              pointerEvents: 'none',
            }}
          >
            <HuAvatar
              Icon={IconPlayerPlay}
              size="small"
            />
          </Stack>
        </>
      );
    }

    const videoSrc = attachment.local_video_url || attachment.video_url;

    return (
      <LazySecureAwareVideo
        isSecure={isSecure}
        url={videoSrc}
        sxSecure={sxProps}
        sxDefault={sxProps}
        hasControls={false}
        hasPlayerButton
        avatarSize="small"
      />
    );
  };

  const renderThumbnail = (attachment: SendFileItem, index: number) => {
    const isVideo = attachment.metadata.format === Format.VIDEO;
    const sxProps = getThumbnailSx(selectedIndex === index);

    if (isVideo) {
      return (
        <Stack
          key={`${attachment.id}-${index}`}
          onClick={() => onSelectIndex(index)}
          sx={{
            height: THUMBNAIL_SIZE,
            width: THUMBNAIL_SIZE,
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
            flexShrink: 0,
          }}
        >
          {renderVideoThumbnail(attachment as SendVideosType, index)}
        </Stack>
      );
    }

    const imageUrl = (attachment as SendImagesType).image_url;
    if (!imageUrl) return null;

    return (
      <Stack
        key={`${attachment.id}-${index}`}
        onClick={() => onSelectIndex(index)}
        sx={{
          height: THUMBNAIL_SIZE,
          width: THUMBNAIL_SIZE,
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
          flexShrink: 0,
        }}
      >
        <LazySecureAwareImage
          isSecure={isSecure}
          url={imageUrl}
          alt={attachment.filename}
          sxSecure={sxProps}
          sxDefault={sxProps}
          imageClass={BUNNY_IMAGE_CLASSES.FA_THUMB}
        />
      </Stack>
    );
  };

  return (
    <Stack
      sx={{
        gridColumn: 2,
        flexDirection: 'row',
        justifyContent: 'center',
        overflowX: 'auto',
        gap: 1,
        scrollBehavior: 'smooth',
        '&::-webkit-scrollbar': { display: 'none' },
      }}
    >
      {attachments.map(renderThumbnail)}
    </Stack>
  );
};

export default Carrousel;