import React, { useState } from "react";
import Item from "../Item";
import { IImageUseItem } from "..";

import * as S from "./style";

const ItemGroup = (props: IItemGroupProps): React.ReactElement => {
	const { title, items, disabled, onClick } = props;
	const [isOpen, setIsOpen] = useState(false);

	const handleClick = () => setIsOpen(!isOpen);

	return (
		<S.Wrapper>
			<S.Label onClick={handleClick} isOpen={isOpen}>
				{title}
			</S.Label>
			<S.Content isOpen={isOpen}>
				{items.map((item) => {
					const handleClick = () => onClick(item);
					return (
						<Item
							title={item.title}
							date={item.date}
							type={item.structuredData?.title || "Page"}
							key={item.id}
							onClick={handleClick}
							disabled={disabled}
						/>
					);
				})}
			</S.Content>
		</S.Wrapper>
	);
};

interface IItemGroupProps {
	title: string;
	items: IImageUseItem[];
	disabled?: boolean;
	onClick(item: IImageUseItem): void;
}

export default ItemGroup;
