import { memo } from 'react';

import type { YouTubeVideo } from '~/lib/songwhipApi/types';
import type { ClickableProps } from '~/src/components/Clickable';
import type { ReactNode } from 'react';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import Image from '~/src/components/Image';
import toSizedImageUrlNext from '~/src/lib/toSizedImageUrlNext';

interface VideoListItemProp extends Omit<ClickableProps, 'children'> {
  image: YouTubeVideo['image'];
  link: string;
  aspect?: number;
  withHref?: boolean;
  children?: ReactNode;
  imageOpacity?: number;
  renderAfter?: () => ReactNode;
}

const VideoListItem = memo<VideoListItemProp>(
  ({
    image,
    link,
    aspect = 9 / 16,
    maxHeight,
    withHref = true,
    children,
    imageOpacity,
    onClick,
    data,
    renderAfter = () => null,
    ...boxProps
  }) => {
    const imgStyle = {
      width: '102%',
      height: '102%',
      left: '-1%',
      top: '-1%',
      right: '-1%',
      bottom: '-1%',
      filter: 'saturate(0.8)',
    };

    if (image.aspect === '4:3') {
      imgStyle.width = imgStyle.height = '132%';
      imgStyle.top = imgStyle.left = '-16%';
    }

    return (
      <Box tag="li" testId="videoItem" {...boxProps}>
        <Clickable
          onClick={onClick}
          data={data}
          href={withHref ? link : undefined}
        >
          <Box
            positionRelative
            style={{
              border: 'solid 1px #333',
              borderRadius: '1.6rem',
              overflow: 'hidden',
            }}
          >
            <Image
              alt="Video thumbnail"
              src={toSizedImageUrlNext({
                url: image.url,
                width: 700,
              })}
              className="image"
              borderRadius="1.6rem"
              aspect={aspect}
              pointerEvents="none"
              maxHeight={maxHeight}
              style={{
                background: '#111',
                opacity: imageOpacity,
              }}
              isLazy
              imgStyle={imgStyle}
            />
            {children}
          </Box>
          {renderAfter()}
        </Clickable>
      </Box>
    );
  }
);

export default VideoListItem;