import { type NextPage } from "next";
import Head from "next/head";

import { api } from "~/utils/api";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import Image from "next/image";
import VideoUploadModal from "~/components/VideoUploadModal";
import { getTime } from "~/utils/getTime";

const VideoList: NextPage = () => {
  const router = useRouter();
  const { status } = useSession();
  const { data: videos, isLoading } = api.video.getAll.useQuery();

  if (status === "unauthenticated") {
    void router.push("/sign-in");
  }

  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex h-screen min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
        <div className="flex min-h-[80px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
          <span>Screenity</span>
          <div>
            <VideoUploadModal />
          </div>
        </div>
        <div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14">
          <div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16">
            {videos &&
              videos.map(({ title, id, createdAt }) => (
                <VideoCard
                  title={title}
                  id={id}
                  createdAt={createdAt}
                  key={id}
                />
              ))}

            {isLoading ? (
              <>
                <VideoCardSkeleton />
                <VideoCardSkeleton />
                <VideoCardSkeleton />
                <VideoCardSkeleton />
              </>
            ) : null}

            {videos && videos?.length <= 0 ? (
              <div>
                <span>You do not have any recordings.</span>
              </div>
            ) : null}
          </div>
        </div>
      </main>
    </>
  );
};

interface VideoCardProps {
  title: string;
  id: string;
  createdAt: Date;
}

const VideoCardSkeleton = () => {
  return (
    <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
      <figure className="relative aspect-video w-full bg-slate-200"></figure>
      <div className="m-4 flex flex-col">
        <span className="h-4 rounded bg-slate-200"></span>
        <span className="mt-4 h-4 rounded bg-slate-200"></span>
      </div>
    </div>
  );
};

const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
  return (
    <Link href={`/share/${id}`}>
      <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
        <figure>
          <Image
            src="https://i3.ytimg.com/vi/BuaKzm7Kq9Q/maxresdefault.jpg"
            alt="video thumbnail"
            width={248}
            height={139.5}
          />
        </figure>
        <div className="m-4 flex flex-col">
          <span className="line-clamp-2 font-bold text-[0f0f0f]">{title}</span>
          <span className="mt-2 text-[#606060]">{getTime(createdAt)}</span>
        </div>
      </div>
    </Link>
  );
};

export default VideoList;
