import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';
import { ArchiveRounded } from '@mui/icons-material';

import { Box, Checkbox, Grid, Stack, Tooltip, Typography } from '@/mui/components';
import { CustomBrandSafety, CustomTargetCircular } from '@/mui/components/CustomIcon';

import noImage from '@/assets/img/no-image-portrait.svg';

import styles from './Thumbnail.module.scss';

const TRANSPARENT_PIXEL =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

function Thumbnail({ thumbnailUrl = noImage, ...props }) {
  return (
    <Grid container justifyContent="center" alignItems="center" className={styles.Wrapper}>
      <Image
        src={thumbnailUrl || noImage}
        alt="thumbnail"
        placeholder="blur"
        blurDataURL={TRANSPARENT_PIXEL}
        className={styles.ThumbnailImage}
        width={500}
        height={500}
      />

      {props.isBulkActionsActive && (
        <Stack className={styles.CheckboxRoot} justifyContent="center">
          <Checkbox color="primary" size="small" checked={props.isSelectedForBulkAction} />
        </Stack>
      )}

      <Grid container justifyContent="space-between" alignItems="center" className={styles.Metadata}>
        <Stack direction="row" spacing={2}>
          {props.isUnsafe && (
            <Tooltip title="This video contains one or more brand safety tags">
              <div className={styles.MetaIcon}>
                <CustomBrandSafety fontSize="medium" htmlColor="common.white" />
              </div>
            </Tooltip>
          )}

          {props.isHasTargeting && (
            <Tooltip title="Video Includes a targeting setup and may not be played back">
              <div className={styles.MetaIcon}>
                <CustomTargetCircular fontSize="xSmall" htmlColor="common.white" />
              </div>
            </Tooltip>
          )}

          {props.isArchive && (
            <Tooltip title="Archived">
              <div className={styles.MetaIcon}>
                <ArchiveRounded fontSize="xSmall" htmlColor="common.white" />
              </div>
            </Tooltip>
          )}
        </Stack>
        <Stack direction="row" spacing={1}>
          <Box className={styles.Language}>
            <Typography variant="caption" color="common.white">
              {props.lang}
            </Typography>
          </Box>
          <Box className={styles.Duration}>
            <Typography variant="caption" color="common.white">
              {props.duration}
            </Typography>
          </Box>
        </Stack>
      </Grid>
    </Grid>
  );
}

Thumbnail.propTypes = {
  thumbnailUrl: PropTypes.string,
  duration: PropTypes.string.isRequired,
  lang: PropTypes.string.isRequired,
  isUnsafe: PropTypes.bool.isRequired,
  isArchive: PropTypes.bool.isRequired,
  isHasTargeting: PropTypes.bool.isRequired,
  isBulkActionsActive: PropTypes.bool.isRequired,
  isSelectedForBulkAction: PropTypes.bool.isRequired,
  isSponsored: PropTypes.bool.isRequired,
  onChangeForBulkActions: PropTypes.func.isRequired,
};

export default Thumbnail;
