"use client";
import { useEffect, useState } from "react";
import Cards from "./Cards";
import { Button } from "@mui/material";

/**
 * Retorna na tela uma coleção
 * @param {Array.<Object>} data - recursos da coleção
 * @param {number} cardsPerRow - quantidade de cards que cabem na linha 
 */
export default function GroupCardsCollections({ data, cardsPerRow }) {
    const [expanded, setExpanded] = useState(false);
    const [showButton, setShowButton] = useState(false);

    const handleResize = (data) => {
        setShowButton(data.length > cardsPerRow);
    };

    const toggleContent = () => {
        setExpanded(!expanded);
    };

    useEffect(() => {
        handleResize(data);
    }), [cardsPerRow];

    return (
        <div className="flex flex-col">
            <div className="mx-1 flex flex-col">
                <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center max-sm:ml-0  md:ml-0 ml-8 ${expanded ? "" : "overflow-y-hidden h-[340px]"}`}>

                    {data.length !== 0 ? data.map((item, index) => {
                        return (
                            <Cards
                                key={index}
                                id={item['collectionable']['id']}
                                title={item["collectionable"]["name"]}
                                author={item["collectionable"]["publisher"]["name"]}
                                authorId={item["collectionable"]["publisher"]["id"]}
                                avatar={item["collectionable"]["publisher"]["avatar"]}
                                image={item["collectionable"]["thumbnail"]}
                                updated_at={item["collectionable"]["updated_at"]}

                            />
                        );
                    })
                        :
                        <div className="flex flex-col justify-center w-full items-center">
                            <p className="text-main-text text-xl font-bold">Coleção Vazia</p>
                            <p className="text-main-text text-sm font-bold">Adicione novos recursos!</p>
                        </div>
                    }
                </div>
            </div>
            <>
            {/*mostra botão de ver mais caso os recursos de uma coleção cabem em mais de uma linha */}
                {showButton ?
                    (
                        <Button
                            fullWidth
                            disableElevation
                            variant="outlined"
                            className="mb-2 border-hidden hover:bg-transparent rounded-xl  normal-case flex "
                            onClick={toggleContent}
                        >
                            <p className="hover:bg-main px-4 text-main-text-click text-lg rounded-md">

                                {expanded ? "Ver menos..." : "Ver mais..."}
                            </p>
                        </Button>
                    ) : null}
            </>
        </div>
    );
}