import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import ListGroup from 'react-bootstrap/ListGroup';
import Media from 'react-bootstrap/Media';
import Image from 'react-bootstrap/Image';

import Link from 'next/link';

import { getThumbnailURL } from '../util';

import FormattedDuration from './localization/FormattedDuration';

import style from './VideoListItem.module.scss';
import sanitizeTitle from '../util/sanitizeTitle';

import hourglassImage from '../images/hourglass.svg';

export default function VideoListItem({
  thumbnailServerURL,
  duration,
  id,
  fileName,
  title,
  sourceVideoStart,
  sourceVideoEnd,
}: {
  thumbnailServerURL: string,
  duration: number | string,
  id: string,
  fileName: string,
  title: string,
  sourceVideoStart: number | string,
  sourceVideoEnd: number | string,
}) {
  let displayDuration = null;
  if (duration !== null) {
    if (typeof duration === 'string') {
      displayDuration = parseFloat(duration);
    } else {
      displayDuration = duration;
    }
  } else if (
    sourceVideoStart !== null
    && sourceVideoEnd !== null
    && sourceVideoStart !== sourceVideoEnd
  ) {
    let videoEnd: number;
    if (typeof sourceVideoEnd === 'string') {
      videoEnd = parseFloat(sourceVideoEnd);
    } else {
      videoEnd = sourceVideoEnd;
    }
    let videoStart: number;
    if (typeof sourceVideoStart === 'string') {
      videoStart = parseFloat(sourceVideoStart);
    } else {
      videoStart = sourceVideoStart;
    }
    displayDuration = videoEnd - videoStart;
  }
  const titleUrlSlug = sanitizeTitle(title);
  const listGroupItem = (
    <ListGroup.Item action>
      <Media>
        <Image
          className={['mr-3', style.thumbnail].join(' ')}
          src={
            fileName
              ? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
                width: 96,
              })
              : hourglassImage
          }
          srcSet={[96, 96 * 2, 96 * 3]
            .map((width) => [
              fileName
                ? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
                  width,
                })
                : hourglassImage,
              `${width}w`,
            ])
            .map((item) => item.join(' '))
            .join(', ')}
          alt={title}
        />
        <Media.Body>
          <h5 className="mt-0 mb-3">{title}</h5>
          <p>
            {!fileName ? (
              <span>
                <FontAwesomeIcon icon="hourglass" />
                {' '}
                Coming up
              </span>
            ) : ''}
            {displayDuration !== null ? (
              <span>
                <FontAwesomeIcon icon="clock" />
                {' '}
                <FormattedDuration
                  seconds={displayDuration}
                  format="{hours} {minutes} {seconds}"
                  unitDisplay="short"
                />
              </span>
            ) : ''}
          </p>
        </Media.Body>
      </Media>
    </ListGroup.Item>
  );
  if (fileName) {
    return (
      <Link passHref href="/[id]/[vslug]" as={`/${id}/${titleUrlSlug}`}>
        {listGroupItem}
      </Link>
    );
  }
  return listGroupItem;
}