<script lang="ts">
    import { Form, FormGroup, Input, Button} from "@sveltestrap/sveltestrap";

    interface Props {
        url: string;
    }

    let { url }: Props = $props();

    let showAlert: boolean = $state(false);
    let errorMessage: string = $state("")

    let dni: number = $state(0)
    let email: string = $state("")
    let contraseña: string = $state("")
    let nombre: string = $state("") 
    let apellido: string = $state("")
    let domicilio: string = $state("") 
    let celular: string = $state("") 

    const token = sessionStorage.getItem("token");

    async function submitForm(event: any) {
        event.preventDefault();
        try {
            let response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Auth' : String(token),
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({dni, nombre, apellido, domicilio, celular, email, contraseña})
            });
            if (response.ok){
                const errorData = await response.json();
                errorMessage = errorData.message;
                showAlert = true;
            }
            if (!response.ok) {
                const errorData = await response.json();
                errorMessage = errorData.message;
                showAlert = true;
            }
        } catch (e) {
            throw new Error("Fallo al enviar el formulario para crear un inquilino");
        }
    }
</script>
<div class="card">
    <div class="card-body">
        <Form on:submit={submitForm}>
            <FormGroup floating label="Dni*">
                <Input type="number" min='1' bind:value={dni} required />
            </FormGroup>

            <div class="row">
                <div class="col">
                    <FormGroup floating label="Nombre*">
                        <Input type="text" bind:value={nombre} required />
                    </FormGroup>
                </div>
                <div class="col">
                    <FormGroup floating label="Apellido*">
                        <Input type="text" bind:value={apellido} required />
                    </FormGroup>
                </div>
            </div>

            <FormGroup floating label="Email*">
                <Input type="email" placeholder="ejemplo@mail.com" bind:value={email} required />
            </FormGroup>
            <FormGroup floating label="Contraseña*">
                <Input type="password" placeholder="*********" bind:value={contraseña} required />
            </FormGroup>     

            <div class="row">
                <div class="col">
                    <FormGroup floating label="Domicilio*">
                        <Input type="text" bind:value={domicilio} required />
                    </FormGroup>
                </div>
                <div class="col">
                    <FormGroup floating label="Celular*">
                        <Input type="tel" bind:value={celular} required />
                    </FormGroup>
                </div>
            </div>

            <FormGroup>
                <Button color="primary" type="submit">Crear</Button>
            </FormGroup>
        </Form>
    </div>
</div>
{#if showAlert}
<div class='alert alert-warning alert-dismissible fade show' role='alert'>
    <strong>{errorMessage}</strong> 
    <button type="button" class="btn-close close" aria-label="Close" data-bs-dismiss="alert"></button>
</div>
{/if}