import { Section } from "@wp2/ui/dist/section";
import { tinaField } from "tinacms/dist/react";
import React, { useEffect, useRef, useState } from "react";
import { useLocalize } from "@wp2/helpers/dist/client";
import { createBlock } from "../create";
import { Button } from "@wp2/ui/dist/button";
import { cn } from "@wp2/helpers";
import { Text } from "@wp2/ui/dist/text";
const useIsVisible = () => {
    const [isVisible, setIsVisible] = useState(false);
    const ref = useRef(null);
    const checkVisibility = () => {
        if (!ref.current) {
            return;
        }
        const rect = ref.current.getBoundingClientRect();
        const halfHeight = rect.height / 2;
        const isElementHalfVisible = (rect.top >= 0 && rect.top < window.innerHeight - halfHeight) || (rect.bottom > halfHeight && rect.bottom <= window.innerHeight);
        setIsVisible(isElementHalfVisible);
    };
    useEffect(() => {
        window.addEventListener("scroll", checkVisibility);
        checkVisibility();
        return () => window.removeEventListener("scroll", checkVisibility);
    }, [ref.current]);
    return { isVisible, ref };
};
export const Divi = createBlock(({ data }) => {
    const localize = useLocalize();
    const { ref, isVisible } = useIsVisible();
    return (<Section id="quote">
      <div className={cn("fixed h-full w-full top-0 left-0 duration-500", isVisible ? "bg-primary/60 z-40" : "-z-10")}/>
      <div ref={ref} className={cn("text-center flex flex-col items-center bg-primary relative z-50 duration-500", isVisible ? "scale-110 shadow-md" : "")}>
        <div className="flex flex-col gap-6 py-24 relative items-center">
          <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
            {localize(data.title?.text)
            ?.split(".")
            .filter((l) => l)
            .map((line, i) => (<React.Fragment key={i}>
                  {line}.<br />
                </React.Fragment>))}
          </Text>
          <Text variant={data.title?.variant} data-tina-field={tinaField(data, "subtitle")}>
            {localize(data.subtitle?.text)}
          </Text>
          <Button href={data.button?.url} data-tina-field={tinaField(data, "button")} variant={data.button?.variant} className="">
            {localize(data.button?.label)}
          </Button>
        </div>
      </div>
    </Section>);
});