import { AssetModel } from "@/contracts/client.schemas";
import { CheckBox } from "@/shared";

import { useReportAssetListContext } from "../contexts/useReportAssetListContext";
import { Divider } from "../Divider/Divider";

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

interface Props {
	asset: AssetModel;
	depth: number;
}

export function AssetView(props: Props) {
	const context = useReportAssetListContext();

	function handleCheck() {
		if (context.isSelectedAsset(props.asset.id)) {
			context.unselectAsset(props.asset.id);
		} else {
			context.selectAsset(props.asset.id);
		}
	}

	function getChecked() {
		if (context.isSelectedAsset(props.asset.id)) {
			return "checked";
		} else {
			return "unchecked";
		}
	}

	return (
		<>
			<div
				className={`${styles.container} ${
					props.depth > 0 && styles.indent
				}`}
			>
				<div className={styles.labelGroup}>
					<div>
						<CheckBox state={getChecked()} onClick={handleCheck} />
					</div>
					<div className={styles.label} title={props.asset.name}>
						{props.asset.name}
					</div>
				</div>
			</div>

			<Divider />
		</>
	);
}
