import { useState } from "react";

import { Avatar, TruncatedTooltip } from "@ax/components";

import EventItem from "./EventItem";

import * as S from "./style";

const UserItem = (props: IUserItemProps) => {
	const { user, getLog } = props;
	const { logActivity, ...userProps } = user;
	const { image, name } = userProps;

	const [isOpen, setIsOpen] = useState(false);

	const handleToggle = () => setIsOpen((state) => !state);

	const buttonText = isOpen ? "Hide events" : "Show events";

	return (
		<S.Item>
			<S.User>
				<S.AvatarWrapper>
					<Avatar image={image} name={name || ""} size={24} />
				</S.AvatarWrapper>
				<S.Name>
					<TruncatedTooltip content={name || ""} expanded top={-5}>
						<S.Title>{name}</S.Title>
					</TruncatedTooltip>
				</S.Name>
				{!isOpen && <S.CounterWrapper>{logActivity.length} events created</S.CounterWrapper>}
				<S.ToggleWrapper>
					<S.Toggle onClick={handleToggle} isOpen={isOpen}>
						{buttonText}
					</S.Toggle>
				</S.ToggleWrapper>
			</S.User>
			<S.EventList isOpen={isOpen}>
				{logActivity.map((item: any, index: number) => (
					<EventItem key={index} item={{ ...item, user: userProps }} getLog={getLog} />
				))}
			</S.EventList>
		</S.Item>
	);
};

interface IUserItemProps {
	user: any;
	getLog(): void;
}

export default UserItem;
