<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import type { Model } from './+page.svelte';
	import ModelData from './ModelData.svelte';
	import { post, showMessage } from 'src/lib/requests.svelte';
	import ModelDataPageStatsGraph from './ModelDataPageStatsGraph.svelte';
	import type { ModelStats } from './types';
	import DeleteZip from './DeleteZip.svelte';

	let { model, active }: { model: Model; active?: boolean } = $props();

	const dispatch = createEventDispatcher<{ reload: void }>();

	$effect(() => {
		if (active) getData();
	});

	let stats: ModelStats | undefined = $state();

	async function getData() {
		if (!model) return;
		try {
			stats = await post(`models/class/stats`, { id: model.id });
		} catch (e) {
			showMessage(e);
		}
	}
</script>

{#if active}
	<div class="content selected">
		{#if stats}
			<ModelDataPageStatsGraph data={stats} />
		{/if}

		{#if [-6, -2].includes(model.status)}
			<DeleteZip {model} on:reload={() => dispatch('reload')} expand />
		{/if}

		<ModelData
			{model}
			on:reload={() => {
				getData();
				dispatch('reload');
			}}
		/>
	</div>
{/if}
