import { Button, Events } from "../../index";
import { useState, useMemo, useRef, useEffect } from "react";

export default function Cluster1({
    title,
    text,
    data,
    limit,
    transition,
    more,
}: Cluster.Cluster1) {
    const [showElements, setShowElements] = useState<boolean>(false);
    const contentRef = useRef<HTMLUListElement>(null);
    const [contentHeight, setContentHeight] = useState<number>(0);

    const { show, noShow } = useMemo(() => {
        if (limit <= 0) return { show: [], noShow: [] };

        return {
            show: data.slice(0, limit),
            noShow: data.slice(limit),
        };
    }, [data, limit]);

    useEffect(() => {
        if (contentRef.current && noShow.length > 0) {
            setContentHeight(contentRef.current.scrollHeight);
        }
    }, [noShow]);

    function showMore() {
        setShowElements(!showElements);
    }

    return (
        <aside>
            {title && <h2 className="text-center darkTitle">{title}</h2>}
            {text && <p className="pText text">{text}</p>}
            <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 p-3 sm:gap-3 text-center mx-auto">
                {show.map((item) => (
                    <li key={`cluster-${Events.Utils.slugify(item.name)}`}>
                        <a
                            href={item.href}
                            aria-label={`Ir a ${item.name}`}
                            target={item.target || "_self"}
                            rel={item.rel || "tag"}
                        >
                            <div className="rounded-md border-2 bg-white darkContainer darkContainerHover border-gray-100 hover:shadow-lg transition-all">
                                <div>
                                    <img
                                        src={item.img}
                                        alt={item.alt}
                                        className="mx-auto w-[390px] h-44 object-cover rounded-t"
                                        style={{
                                            viewTransitionName: transition
                                                ? `image-cluster-${Events.Utils.slugify(item.name)}`
                                                : undefined,
                                        }}
                                    />
                                </div>
                                <h3 className="H5 link my-4">{item.name}</h3>
                            </div>
                        </a>
                    </li>
                ))}
            </ul>
            <ul
                ref={contentRef}
                style={{
                    height: showElements ? contentHeight : 0,
                    transition: "height 0.4s ease-in-out",
                    overflow: "hidden",
                }}
                className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 p-6 sm:gap-3 text-center mx-auto"
            >
                {noShow.map((item) => (
                    <li key={`cluster-${Events.Utils.slugify(item.name)}`}>
                        <a
                            href={item.href}
                            aria-label={`Ir a ${item.name}`}
                            target={item.target || "_self"}
                            rel={item.rel || "tag"}
                        >
                            <div
                                className={`rounded-md border-2 bg-white darkContainer darkContainerHover border-gray-100 hover:shadow-lg transition-all ${showElements ? "" : "opacity-0"}`}
                            >
                                <div>
                                    <img
                                        src={item.img}
                                        alt={item.alt}
                                        className="mx-auto w-[390px] h-44 object-cover rounded-t"
                                        style={{
                                            viewTransitionName: transition
                                                ? `image-cluster-${Events.Utils.slugify(item.name)}`
                                                : undefined,
                                        }}
                                    />
                                </div>
                                <h3 className="H5 link my-4">{item.name}</h3>
                            </div>
                        </a>
                    </li>
                ))}
            </ul>
            {more && (
                <Button.Button1
                    name={`${showElements ? "Mostrar menos" : "Mostrar más"}`}
                    ariaLabel={`${showElements ? "Mostrar menos elementos" : "Mostrar más elementos"}`}
                    type="button"
                    onClick={showMore}
                />
            )}
        </aside>
    );
}