<script lang="ts">
	import MessageSimple from 'src/lib/MessageSimple.svelte';
	import type { Model } from './+page.svelte';
	import { post } from 'src/lib/requests.svelte';
	import { createEventDispatcher } from 'svelte';

	let { number_of_invalid_images, has_data, model } = $props<{
		number_of_invalid_images: number;
		has_data: boolean;
		model: Model;
	}>();

	let data = $state({
		model_type: 'simple',
		number_of_models: 1,
		accuracy: 95
	});

	let submitted = $state(false);

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

	let messages: MessageSimple;

	async function submit() {
		messages.clear();
		submitted = true;
		try {
			await post('models/train', {
				id: model.id,
				...data
			});
			dispatch('reload');
		} catch (e) {
			if (e instanceof Response) {
				messages.display(await e.json());
			} else {
				messages.display('Could not start the training of the model');
			}
		}
	}

	async function submitRetrain() {
		messages.clear();
		submitted = true;
		try {
			await post('model/train/retrain', { id: model.id });
			dispatch('reload');
		} catch (e) {
			if (e instanceof Response) {
				messages.display(await e.json());
			} else {
				messages.display('Could not start the training of the model');
			}
		}
	}
</script>

{#if model.status == 2}
	<form class:submitted on:submit|preventDefault={submit}>
		{#if has_data}
			{#if number_of_invalid_images > 0}
				<p class="danger">
					There are images {number_of_invalid_images} that were loaded that do not have the correct format.DeleteZip
					These images will be delete when the model trains.
				</p>
			{/if}
			<MessageSimple bind:this={messages} />
			<!-- TODO expading mode -->
			<fieldset>
				<legend> Model Type </legend>
				<div class="input-radial">
					<input
						id="model_type_simple"
						value="simple"
						name="model_type"
						type="radio"
						bind:group={data.model_type}
					/>
					<label for="model_type_simple">Simple</label><br />
					<input
						id="model_type_expandable"
						value="expandable"
						name="model_type"
						bind:group={data.model_type}
						type="radio"
					/>
					<label for="model_type_expandable">Expandable</label>
				</div>
			</fieldset>
			<!-- TODO allow more models to be created -->
			<fieldset>
				<label for="number_of_models">Number of Models</label>
				<input
					id="number_of_models"
					type="number"
					name="number_of_models"
					bind:value={data.number_of_models}
				/>
			</fieldset>
			<!-- TODO to Change the acc -->
			<fieldset>
				<label for="accuracy">Target accuracy</label>
				<input id="accuracy" type="number" name="accuracy" bind:value={data.accuracy} />
			</fieldset>
			<!-- TODO allow to chose the base of the model -->
			<!-- TODO allow to change the shape of the model -->
			<button> Train </button>
		{:else}
			<h2>To train the model please provide data to the model first</h2>
		{/if}
	</form>
{:else}
	<form class:submitted on:submit|preventDefault={submitRetrain}>
		{#if has_data}
            <h2>
                This model has new classes and can be expanded
            </h2>
			{#if number_of_invalid_images > 0}
				<p class="danger">
					There are images {number_of_invalid_images} that were loaded that do not have the correct format.DeleteZip
					These images will be delete when the model trains.
				</p>
			{/if}
			<MessageSimple bind:this={messages} />
			<button> Retrain </button>
		{:else}
			<h2>To train the model please provide data to the model first</h2>
		{/if}
	</form>
{/if}
