import VodsList from '@/app/components/vods-list';
import Link from 'next/link';
import { getVtuberBySlug } from '@/app/lib/vtubers'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt, faBagShopping } from "@fortawesome/free-solid-svg-icons";
import { faFacebook, faInstagram, faPatreon, faYoutube, faTwitch, faTiktok, faXTwitter, faReddit, faDiscord } from "@fortawesome/free-brands-svg-icons";
import Image from "next/legacy/image";
import OnlyfansIcon from "@/app/components/icons/onlyfans";
import PornhubIcon from '@/app/components/icons/pornhub';
import ThroneIcon from '@/app/components/icons/throne';
import LinktreeIcon from '@/app/components/icons/linktree';
import FanslyIcon from '@/app/components/icons/fansly';
import ChaturbateIcon from '@/app/components/icons/chaturbate';
import CarrdIcon from '@/app/components/icons/carrd';
import styles from '@/assets/styles/icon.module.css';

import { getVodsForVtuber } from '@/app/lib/vods';
import { notFound } from 'next/navigation';
import ArchiveProgress from '@/app/components/archive-progress';
import { getAllStreamsForVtuber, getStreamsForVtuber } from '@/app/lib/streams';
import LinkableHeading from '@/app/components/linkable-heading';



export default async function Page({ params }: { params: { slug: string } }) {
  const vtuber = await getVtuberBySlug(params.slug);
  if (!vtuber) notFound();

  const vods = await getVodsForVtuber(vtuber.id, 1, 9);
  if (!vods) notFound();


  return (
    <>
      {vtuber && (
        <>
          <div className="section">

            <div className="columns is-multiline">
              <div className="column is-full">
                <h1 className="title is-2">{vtuber.display_name}</h1>
              </div>
              <div className="column is-one-quarter">
                <figure className="image is-rounded is-1by1">
                  <Image
                    className="is-rounded"
                    alt={vtuber.display_name}
                    src={vtuber.image}
                    layout='fill'
                    objectFit='cover'
                    placeholder='blur'
                    blurDataURL={vtuber.image_blur}
                  />
                </figure>
              </div>
              <div className="column is-three-quarters">
                <p className="is-size-5 mb-3">{vtuber.description_1}</p>
                <p className="is-size-5">{vtuber.description_2}</p>
              </div>
            </div>

            <h2 id="socials" className="title is-3">
              <Link href="#socials">Socials</Link>
            </h2>

            <div className="column is-full mb-5">
              <div className="columns has-text-centered is-multiline is-centered">
                {vtuber.patreon && (
                  <div className="column is-3 is-narrow">
                    <Link href={vtuber.patreon} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faPatreon} className="fab fa-patreon" /></span><span className="mr-2">Patreon</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.twitter && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.twitter} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faXTwitter} className="fab fa-x-twitter" /></span><span className="mr-2">Twitter</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.youtube && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.youtube} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faYoutube} className="fab fa-youtube" /></span><span className="mr-2">YouTube</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.twitch && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.twitch} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faTwitch} className="fab fa-twitch" /></span><span className="mr-2">Twitch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.tiktok && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.tiktok} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faTiktok} className="fab fa-tiktok" /></span><span className="mr-2">TikTok</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.fansly && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.fansly} className='subtitle is-5'>
                      <span className='mr-2'><FanslyIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Fansly</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.onlyfans && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.onlyfans} className='subtitle is-5'>
                      <span className='mr-2'>
                        <OnlyfansIcon width={20} height={20} className={styles.icon}></OnlyfansIcon>
                      </span><span className="mr-2">OnlyFans</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.pornhub && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.pornhub} className='subtitle is-5'>
                      <span className='mr-2'><PornhubIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Pornhub</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.reddit && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.reddit} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faReddit} className="fab fa-reddit" /></span><span className="mr-2">Reddit</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.discord && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.discord} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faDiscord} className="fab fa-discord" /></span><span className="mr-2">Discord</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.instagram && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.instagram} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faInstagram} className="fab fa-instagram" /></span><span className="mr-2">Instagram</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.facebook && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.facebook} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faFacebook} className="fab fa-facebook" /></span><span className="mr-2">Facebook</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.merch && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.merch} className="subtitle is-5">
                      <span className="mr-2"><FontAwesomeIcon icon={faBagShopping} className="fas fa-bag-shopping" /></span><span className="mr-2">Merch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.chaturbate && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.chaturbate} className='subtitle is-5'>
                      <span className='mr-2'><ChaturbateIcon width={20} className={styles.icon}/></span><span className="mr-2">Chaturbate</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.throne && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.throne} className='subtitle is-5'>
                      <span className='mr-2'><ThroneIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Throne</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.linktree && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.linktree} className='subtitle is-5'>
                      <span className='mr-2'><LinktreeIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Linktree</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
                {vtuber.carrd && (
                  <div className="column is-3 is-narrow">
                    <Link target="_blank" href={vtuber.carrd} className='subtitle is-5'>
                      <span className='mr-2'><CarrdIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Carrd</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
                    </Link>
                  </div>
                )}
              </div>
            </div>


            {/* <h2 id="toys" className="title is-3">
              <Link href="#toys">Toys</Link>
            </h2>

            <>
              <ToysList vtuber={vtuber} toys={toys} page={1} pageSize={toySampleCount} />
              {(toys.pagination.total > toySampleCount) && <Link href={`/vt/${vtuber.slug}/toys/1`} className='button mb-5'>See all of {vtuber.display_name}'s toys</Link>}
            </> */}

            <h2 id="vods" className="title is-3">
              <Link href="#vods">Vods</Link>
            </h2>

            <VodsList vtuber={vtuber} vods={vods} page={1} pageSize={9} />
            {
              (vods) ? (
                <Link className='button mb-5' href={`/vt/${vtuber.slug}/vods/1`}>See all {vtuber.display_name} vods</Link>
              ) : (<p className='section'><i>No VODs have been added, yet.</i></p>)
            }

            
          </div>
        </>
      )}
    </>
  );
}