import { useTranslation } from "react-i18next";

import { useDialogStore } from "@/contexts/dialog/lib/useDialogStore";
import { PrimaryButton } from "@/shared";
import { useReportBuilderStore } from "@/store/report-builder.store";
import { NewReportBuilder } from "@/widgets/Reports/ui/NewReportBuilder";

import { useReportAssetListContext } from "./contexts/useReportAssetListContext";
import { GroupListView } from "./GroupListView/GroupListView";
import styles from "./ReportAssetListInner.module.css";

export function ReportAssetListInner() {
	const { t } = useTranslation("translation");
	const context = useReportAssetListContext();
	const reportBuilderStore = useReportBuilderStore();
	const pushDialog = useDialogStore((x) => x.push);

	function goToReportParameters() {
		const assetIdList = Array.from(context.selectedAssetIds);
		reportBuilderStore.setAssetIdList(assetIdList);

		pushDialog({
			key: "report-parameters",
			content: <NewReportBuilder />,
		});
	}

	return (
		<div className={styles.container}>
			<div className={styles.mainContainer}>
				<div className={styles.main}>{t("All assets")}</div>
				<div className={styles.commonContainer}>
					<div className={styles.commonCountLabel}>
						{t("totalCount")}
					</div>
					<div className={styles.commonCountValue}>
						{context.assets.length.toFixed(0)}
					</div>
				</div>
			</div>

			<GroupListView key="root" />

			<div className={styles.buildButton}>
				<PrimaryButton
					onClick={() => goToReportParameters()}
					disabled={context.selectedAssetIds.size === 0}
				>
					{t("buildReport")}
				</PrimaryButton>
			</div>
		</div>
	);
}
