import { ArrowDownIcon } from "@/shared";

import { AssetListView } from "../AssetListView/AssetListView";
import { useAllAssetsCardContext } from "../contexts/useAllAssetsCardContext";
import { Divider } from "../Divider/Divider";

import styles from "./GroupView.module.css";

const arrowDefaultColor = "var(--black-300)";
const arrowActiveColor = "var(--white)";

interface Props {
	label: string;
	id: string;
	depth: number;
}

export function GroupView(props: Props) {
	const context = useAllAssetsCardContext();
	const isActive = context.isActiveGroup(props.id);

	function handleClick() {
		if (isActive) {
			context.deactivateGroup(props.id);
			return;
		}

		context.activateGroup(props.id);
	}

	return (
		<>
			<div
				className={`${styles.container} ${isActive && styles.active} ${
					props.depth > 0 && styles.indent
				}`}
				onClick={handleClick}
			>
				<div className={styles.label}>{props.label}</div>
				<div className={styles.arrow}>
					<ArrowDownIcon
						color={isActive ? arrowActiveColor : arrowDefaultColor}
					/>
				</div>
			</div>

			<Divider />

			{isActive && (
				<AssetListView groupId={props.id} depth={props.depth} />
			)}
		</>
	);
}
