import { useEmitter } from "react-eventizer";

import { AssetModel } from "@/contracts/client.schemas";
import { useMapMover } from "@/hooks/use-map-mover";

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

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

export function AssetView(props: Props) {
	const mapMover = useMapMover();
	const emit = useEmitter("ALARMASSET.CLICK");

	function handleClick() {
		mapMover(props.asset.id);
		emit({
			assetId: props.asset.id,
		});
	}

	return (
		<>
			<div
				className={`${styles.container} ${styles.active} ${
					props.depth > 0 && styles.indent
				}`}
				onClick={handleClick}
			>
				<div className={styles.label} title={props.asset.name}>
					{props.asset.name}
				</div>
			</div>
		</>
	);
}
