import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import YouTubeFancyBox from "@components/YouTubeFancyBox";
import PlayButton from "@svg/PlayButton";
import Image from "next/legacy/image";
import Link from "next/link";

const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

const toBase64 = (str: string) =>
  typeof window === "undefined"
    ? Buffer.from(str).toString("base64")
    : window.btoa(str);

const ProjectVideos = ({ videos, title }: any) => {
  return (
    <>
      <Seperator />
      <section>
        <div className="content-fluid">
          <div className="flex justify-center">
            <h2 className="section-header gradient-extra">
              <span className="z-index-1">Videos</span>
            </h2>
          </div>
          <SeperatorInner />
          <YouTubeFancyBox options={{ type: "youtube" }}>
            <div className="flex justify-center flex-wrap">
              {videos.map((video: any, index: number) => {
                return (
                  <div className="w-full lg:w-1/2 p-3" key={index}>
                    <Link
                      data-fancybox
                      href={video.videoLink}
                      className="project-video-gallery-wrapper"
                    >
                      <div className="overlay"></div>
                      <PlayButton />
                      <Image
                        priority={false}
                        blurDataURL={`data:image/svg+xml;base64,${toBase64(
                          shimmer(700, 475)
                        )}`}
                        placeholder="blur"
                        className="absolute object-cover project-video-thumbnail"
                        src={`https://img.youtube.com/vi/${video.videoID}/maxresdefault.jpg`}
                        layout="fill"
                        sizes="50vw"
                        alt="gallery-image"
                      />
                    </Link>
                  </div>
                );
              })}
            </div>
          </YouTubeFancyBox>
        </div>
      </section>
    </>
  );
};

export default ProjectVideos;