<script>
    import { onMount } from 'svelte'
    import { storeLayout } from '$/stores/global'
    import PageTitle from '$/components/PageTitle.svelte';
    import FormPersona from '../personas/Form.svelte'
    import FormUsuario from './Form.svelte'
    import { Link, useParams, useNavigate } from 'svelte-navigator';
    import { getUsuario, createUsuario, updateUsuario, deleteUsuario } from '$/services/usuarios';
    import { updatePersona } from '$/services/personas';

    onMount(() => {
        $storeLayout.showSidebar = false;
        return () => {
            $storeLayout.showSidebar = true;
        }
    })

    const params = useParams()
    const navigate = useNavigate()
    let es_nuevo = true;
    let form_persona = {}
    let form_usuario = {}
    let clave2 = ''
    let loading = false;

    $: es_nuevo = !$params.login
    $: begin($params)

    async function begin({ login = null }) {
        try {
            if (!login) return; // si es nuevo, no busco informacion
            loading = true
            const { persona, ...data } = await getUsuario(login)
            form_persona = persona;
            form_usuario = data;
        } catch (error) {
            console.error(error)
            alert(error.detail || error)
        } finally {
            loading = false;
        }
    }

    async function onSave() {
        try {
            if (form_usuario.clave && form_usuario.clave !== clave2) {
                return alert('Segunda contraseña debe coincidir')
            }
            if (es_nuevo) {
                // para crear un usuario, es requerido enviar los datos de la persona ademas.
                await createUsuario({ ...form_persona, ...form_usuario})
            } else {
                await updateUsuario(form_usuario)
                await updatePersona(form_persona)
            }
            alert('Datos guardados con exito!')
            navigate('/usuarios')
        } catch (error) {
            alert(error.detail || error)
        }
    }

    async function onDelete() {
        try {
            if (!confirm(`Desea eliminar a ${form_usuario.login}?`)) return;
            await deleteUsuario($params.login)
            alert('Registro eliminado con exito!')
            navigate('/usuarios')
        } catch (error) {
            alert(error.detail || error)
        }
    }
</script>

<PageTitle {loading}>{es_nuevo ? 'Nuevo Usuario': 'Editar Usuario'}</PageTitle>

<form action="" on:submit|preventDefault={onSave}>
    <div class="card">
        <div class="card-header d-flex">
            <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Guardar</button>
            {#if !es_nuevo}
                <button type="button" class="btn btn-danger ms-2"
                    on:click|preventDefault={onDelete}>
                    <i class="bi bi-trash"></i> Eliminar
                </button>
            {/if}
            <div class="m-auto"></div>
            <Link to="/usuarios" class="btn btn-outline-secondary">Volver</Link>
        </div>
        <div class="card-body">
            <h4 class="h4 mb-3">Datos de la persona</h4>
            <FormPersona bind:form={form_persona} {es_nuevo} />
            <hr>
            <h4 class="h4 my-3">Datos del usuario</h4>
            <FormUsuario bind:form={form_usuario} bind:clave2={clave2} {es_nuevo} />
        </div>
    </div>
</form>