<script lang="ts">
	import type { AppointmentInputs } from '$lib/dbdata';
	import { onMount } from 'svelte';
	import AppointmentInfo from './AppointmentInfo.svelte';
	import { getTimeSlots } from '$lib/funcs';

	export let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];

	function addInput() {
		const newInput: AppointmentInputs = { name: '', type: 'text' };
		creatorInputs = [...creatorInputs, newInput];
	}

    function removeInput(indexToRemove: number) {
        // creatorInputs.splice(index, 1);
        creatorInputs = creatorInputs.filter((_, index) => index !== indexToRemove);
    }
</script>

<fieldset>
	<legend>Eingaben</legend>
	<button on:click={addInput} class="large circle tertiary">
		<i>add</i>
		<span>Neues Feld</span>
	</button>
	<div class="grid">
		{#each creatorInputs as customInput, index}
			<div class="s12">
				<div class="row bottom-margin">
					<div class="max field border">
						<input bind:value={customInput.name} id="custom-input" />
						<label for="custom-input">Eingabefeld</label>
					</div>
					<div class="max field border">
						<select bind:value={customInput.type} id="custom-type">
							<option value="text">Texteingabe</option>
							<option value="email">E-Mail</option>
							<option value="tel">Telefonnummer</option>
						</select>
						<label for="custom-type">Eingabeart</label>
					</div>
					<button on:click={() => removeInput(index)} class="circle error medium m1">
						<i>delete</i>
						<span>Button</span>
					</button>
				</div>
			</div>
		{/each}
	</div>
</fieldset>
