Header 109

"use client";

import { useState, useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";
import clsx from "clsx";
import { useMediaQuery } from "@/hooks/use-media-query";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { PlayCircle, ProgressActivity } from "relume-icons";

type ImageProps = {
  src: string;
  alt: string;
};

type Props = {
  title: string;
  description: string;
  buttons: ButtonProps[];
  video: string;
  image: ImageProps;
};

export type Header109Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Header109 = (props: Header109Props) => {
  const { title, description, buttons, video, image } = {
    ...Header109Defaults,
    ...props,
  };

  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
  const isMobile = useMediaQuery("(max-width: 767px)");
  const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 991px)");

  const sectionRef = useRef<HTMLElement | null>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["20% start", "end end"],
  });

  const createTransform = (
    mobileValues: string[],
    tabletValues: string[] | null,
    desktopValues: string[],
  ) =>
    useTransform(
      scrollYProgress,
      [0, 1],
      isMobile ? mobileValues : isTablet && tabletValues ? tabletValues : desktopValues,
    );

  const videoDialogMotion = {
    y: useTransform(scrollYProgress, [0.5, 1], ["0vh", "40vh"]),
    width: createTransform(["100%", "50%"], ["100%", "25%"], ["100%", "10%"]),
    height: createTransform(["100%", "25%"], ["100%", "30%"], ["100%", "20%"]),
    top: createTransform(["0%", "37.5%"], ["0%", "35%"], ["0%", "40%"]),
    left: createTransform(["0%", "25%"], ["0%", "37.5%"], ["0%", "45%"]),
  };

  return (
    <section ref={sectionRef} className="relative flex h-[300vh] flex-col items-center">
      <div className="sticky top-0 flex w-full flex-col items-center justify-center">
        <div className="relative z-10 flex h-screen w-full items-center justify-center">
          <Dialog>
            <DialogTrigger asChild>
              <motion.button
                style={videoDialogMotion}
                className="absolute inset-0 flex items-center justify-center"
              >
                <img src={image.src} alt={image.alt} className="size-full object-cover" />
                <PlayCircle className="absolute z-20 size-20 text-white" />
                <span className="absolute inset-0 z-10 bg-neutral-darkest/50" />
              </motion.button>
            </DialogTrigger>
            <DialogContent>
              {!isIframeLoaded && (
                <ProgressActivity className="mx-auto size-16 animate-spin text-white" />
              )}
              <iframe
                className={clsx("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
                  visible: isIframeLoaded,
                  hidden: !isIframeLoaded,
                })}
                src={video}
                allow="autoplay; encrypted-media; picture-in-picture"
                allowFullScreen
                onLoad={() => setIsIframeLoaded(true)}
              ></iframe>
            </DialogContent>
          </Dialog>
        </div>
        <div className="relative py-16 md:py-24 lg:pt-6 lg:pb-28">
          <div className="px-[5%]">
            <div className="container max-w-lg">
              <div className="mx-auto w-full max-w-lg text-center">
                <h1 className="mb-5 text-h1 font-bold md:mb-6">{title}</h1>
                <p className="text-medium">{description}</p>
                <div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
                  {buttons.map((button, index) => (
                    <Button key={index} {...button}>
                      {button.title}
                    </Button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="absolute inset-0 -z-10 mt-[100vh]" />
    </section>
  );
};

export const Header109Defaults: Props = {
  title: "Medium length hero heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  buttons: [
    {
      title: "Button",
    },
    {
      title: "Button",
      variant: "secondary",
    },
  ],
  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video-thumbnail-landscape.svg",
    alt: "Relume placeholder image",
  },
};