import { Image } from 'antd';
import { createStyles } from 'antd-style';
import { ReactElement } from 'react';

interface IProps {
  videos: API.MaterialVideoInfo[];
}

const useStyles = createStyles(() => {
  return {
    container: {
      width: 330,
      display: 'flex',
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginLeft: '-10px',
      marginBottom: '-10px',
    },
    imageContainer: {
      marginLeft: '10px',
      marginBottom: '10px',
    },
  };
});

const Previewer = (props: IProps) => {
  const { videos = [] } = props;
  const { styles } = useStyles();
  const imageRender = (originalNode: ReactElement, info: { current: number }) => {
    const video = videos[info.current];
    if (!video || video.type === 'image') {
      return originalNode;
    }
    // console.log('============>>>>>>', info);
    return <video controls autoPlay width="400px" src={video.url} />;
  };

  return (
    <div className={styles.container}>
      <Image.PreviewGroup preview={{ imageRender, toolbarRender: () => null, destroyOnClose: true }}>
        {videos.map(video => (
          <Image key={video.coverUrl} width={100} src={video.coverUrl} wrapperClassName={styles.imageContainer} />
        ))}
      </Image.PreviewGroup>
    </div>
  );
};

export default Previewer;
