import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { createBlock } from "../create";
import { Text } from "@wp2/ui/dist/text";
import { Image } from "@wp2/ui/dist/image";
import { useLocalize } from "@wp2/helpers/dist/client";
import { useState } from "react";
import { ArrowLeft } from "lucide-react";
import { Button } from "@wp2/ui/dist/button";
export const ImageOpen = ({ selected, setSelected, images }) => {
    const index = images.indexOf(selected);
    const next = () => setSelected(images[(index + 1) % images.length]);
    const prev = () => setSelected(images[(index - 1 + images.length) % images.length]);
    return (<div className="fixed top-0 left-0 bg-foreground/50 flex items-center justify-center w-full h-full z-30 gap-10" onClick={() => setSelected(undefined)}>
      <Button variant={null} onClick={(e) => {
            e.stopPropagation();
            prev();
        }}>
        <ArrowLeft />
      </Button>
      <Image src={selected} width={500} height={500} className="object-cover max-w-[60vw] max-h-[80vh]"/>
      <Button variant={null} onClick={(e) => {
            e.stopPropagation();
            next();
        }}>
        <ArrowLeft className="transform rotate-180"/>
      </Button>
    </div>);
};
export const Gallery = createBlock(({ data }) => {
    const localize = useLocalize();
    const [selected, setSelected] = useState();
    return (<Section id="gallery" className="flex flex-col py-10 gap-20">
      <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
        {localize(data.title?.text)}
      </Text>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4 ">
        {data.images?.map((image, i) => image ? (<div key={i} data-tina-field={tinaField(image, "image")} className="h-full w-full aspect-square cursor-pointer relative overflow-hidden">
              <Image onClick={() => setSelected(image?.image)} width={240} height={240} src={image?.image || undefined} alt={`Gallery ${i}`} className="absolute top-0 left-0 w-full h-full  object-cover hover:scale-110 duration-150"/>
            </div>) : null)}
      </div>
      {selected && <ImageOpen selected={selected} setSelected={setSelected} images={data.images?.map((i) => i?.image) || []}/>}
    </Section>);
});