import React, { useEffect, useMemo, useState } from 'react'
import { FaCalendarAlt, FaEye } from 'react-icons/fa'
import Reflink from '../../../main/RefLink'
import convert from 'convert-units'
import DateTime from 'date-and-time'
import { AccountService } from '../../services/account.service'
import { VideoService } from '../../services/video.service'

export function VideoTeaser(props: any) {
  const [video_info, setVideoInfo] = useState<any>({})
  const [thumbnail, setThumbnail] = useState('')
  const reflink = useMemo(() => {
    return Reflink.parse(props.reflink)
  }, [])

  useEffect(() => {
    const load = async () => {
      setVideoInfo(await AccountService.permalinkToVideoInfo(props.reflink))
      setThumbnail(await VideoService.getThumbnailURL(props.reflink))
    }

    void load()
  }, [])

  return (
    <div className="video-card-list">
      <div className="teaser_holder video-card-image">
        <div className="card-label">
          {(() => {
            const pattern = DateTime.compile('mm:ss')
            return DateTime.format(new Date(video_info.meta.duration * 1000), pattern)
          })()}
        </div>
        <a href={`#/watch/${props.reflink}`}>
          <img className="img-fluid bg-dark" src={thumbnail} alt="" />
        </a>
      </div>
      <span className="video-card-body">
        <div className="video-title">
          <a
            href={`#/watch/${props.reflink}`}
            style={{ textOverflow: 'ellipsis', overflow: 'nowrap' }}
          >
            {video_info.title}
          </a>
        </div>
        <div className="video-page">
          <a href={`#/user/${reflink.source.value}:${reflink.root}`}>{reflink.root}</a>
        </div>
        <div className="video-view">
          <FaEye /> Unknown views
          <span>
            <FaCalendarAlt />
            {(() => {
              if (video_info.creation) {
                const dateBest = convert(
                  (new Date(new Date().toUTCString()) as any) / 1 -
                    Date.parse(video_info.creation) / 1,
                )
                  .from('ms')
                  .toBest()
                if (Math.round(dateBest.val) >= 2) {
                  return `${Math.round(dateBest.val)} ${dateBest.plural} ago`
                } else {
                  return `${Math.round(dateBest.val)} ${dateBest.singular} ago`
                }
              }
            })()}
          </span>
        </div>
      </span>
    </div>
  )
}