import { useRef } from "react";
import { Events } from "../../index";

function Image({
    img,
    alt,
    responsive,
    rev,
    transition,
}: {
    img: string;
    alt: string;
    responsive?: string;
    rev: boolean;
    transition?: boolean;
}) {
    const imageRef = useRef<HTMLImageElement>(null);
    const useTransition = transition
        ? Events.Hooks.useTransitionSides(imageRef, rev)
        : null;
    return (
        <picture>
            {responsive && (
                <source srcSet={responsive} media="(max-width: 767px" />
            )}
            <source srcSet={img} media="(min-width: 768px)" />
            <img
                ref={imageRef}
                src={img}
                alt={alt}
                loading="lazy"
                className={`m-auto rounded-sm shadow ${useTransition}`}
            />
        </picture>
    );
}

function Data({
    data,
    rev,
    transition,
}: {
    data: Hero.Element[];
    rev: boolean;
    transition?: boolean;
}) {
    const dataRef = useRef<HTMLDivElement>(null);
    const useTransition = transition
        ? Events.Hooks.useTransitionSides(dataRef, rev)
        : null;

    return (
        <div
            ref={dataRef}
            className={`m-auto grid grid-cols-1 md:grid-cols-2 gap-5 ${useTransition}`}
        >
            {data.map((item) => (
                <div
                    key={`key-elements-hero2-${Events.Utils.slugify(item.title)}`}
                >
                    <picture>
                        {item.responsive && (
                            <source
                                srcSet={item.responsive}
                                media="(max-width: 767px"
                            />
                        )}
                        <source srcSet={item.img} media="(min-width: 768px)" />
                        <img
                            src={item.img}
                            alt={item.alt}
                            loading="lazy"
                            className="w-11/12 md:w-[155px] mx-auto rounded shadow"
                        />
                    </picture>
                    <h3 className="mt-1 text-lg text">{item.title}</h3>
                    <h4 className="-mt-4 mb-2 text-sm uppercase text">
                        {item.subtitle}
                    </h4>
                </div>
            ))}
        </div>
    );
}

export default function Hero2({
    Props,
    className,
    transition,
}: {
    Props: Hero.Hero2[];
    className?: string;
    transition?: boolean;
}) {
    return (
        <section>
            <ul className={`w-full md:w-10/12 m-auto`}>
                {Props.map((item) => (
                    <li
                        key={`key-container-hero2-${Events.Utils.slugify(item.title)}`}
                        className={`p-5 m-auto shadow rounded darkContainer my-4 ${className}`}
                    >
                        <h2 className="m-auto text-center darkTitle">
                            {item.title}
                        </h2>
                        <div className="grid grid-cols-1 md:grid-cols-2 p-6 gap-3 text-center mx-auto">
                            {item.rev ? (
                                <>
                                    <Image
                                        img={item.img}
                                        alt={item.alt}
                                        responsive={item.responsive}
                                        rev={item.rev}
                                        transition={transition}
                                    />
                                    <Data
                                        data={item.data}
                                        rev={!item.rev}
                                        transition={transition}
                                    />
                                </>
                            ) : (
                                <>
                                    <Data
                                        data={item.data}
                                        rev={!item.rev}
                                        transition={transition}
                                    />
                                    <Image
                                        img={item.img}
                                        alt={item.alt}
                                        responsive={item.responsive}
                                        rev={item.rev}
                                        transition={transition}
                                    />
                                </>
                            )}
                        </div>
                    </li>
                ))}
            </ul>
        </section>
    );
}