import { IVod } from "@futureporn/types";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { getNextVod, getPreviousVod, getUrl } from "../lib/vods";
import { getLocalizedDate } from "../lib/vods";
import Footer from "./footer";

export default async function VodPage2 ({ vod }: { vod: IVod }) {

  // use vod 337 for prototyping, because 337 has both timestamps and tags.

  const nextVod = await getNextVod(vod)
  const previousVod = await getPreviousVod(vod)
  const slug = vod.vtuber.slug

  return (
    <>
      <p className="title">VodPage2</p>
      <p>@todo insert video player here</p>
      <p>@todo insert title here</p>
      <p>@todo insert notes</p>
      <p>@todo insert tags here</p>
      <p>@todo insert timestamps here</p>
      <nav className="level mt-5">
        <div className='level-left'>
            <div className='level-item'>
                {!!previousVod && (
                    <Link className='button' href={getUrl(previousVod, slug, previousVod.date_2)}>
                        <FontAwesomeIcon
                            icon={faChevronLeft}
                            className='fas faChevronLeft'
                        ></FontAwesomeIcon>
                        <span className="ml-2">Prev VOD {getLocalizedDate(previousVod)}</span>
                    </Link>
                )}
            </div>
        </div>
        <div className='level-center'>
            <div className='level-item'>
                <p className='has-text-grey-darker'>ID {vod.id}</p>
            </div>
        </div>
        <div className='level-right'>
            <div className='level-item'>
                {!!nextVod && (
                    <Link className='button' href={getUrl(nextVod, slug, nextVod.date_2)}>
                        <span className="mr-2">Next VOD {getLocalizedDate(nextVod)}</span>
                        <FontAwesomeIcon
                            icon={faChevronRight}
                            className='fas faChevronRight'
                        ></FontAwesomeIcon>
                    </Link>
                )}
            </div>
        </div>
      </nav>
    </>
  )
}