<script>
    import InputRut from "$/components/InputRut.svelte";
import { getPhoto } from "$/services/personas";
import { getTiposPersona } from "$/services/tipos_persona";

export let form = {}
export let es_nuevo = true

let inputFile = null;
let tipos_tratamiento = [];
let rut = '';
let urlPhoto = null

$: begin(es_nuevo)
$: !es_nuevo && (rut = `${form.rut || ''}-${form.dv || ''}`);
$: onChangeRut(rut)
$: cargarPhoto(form.rut)

async function begin(es_nuevo) {
    try {
        tipos_tratamiento = await getTiposPersona()
    } catch (error) {
        globalThis.toast.success(error.detail || error)
    }
}

async function cargarPhoto(rut) {
    try {
        if (!rut) return;
        urlPhoto = await getPhoto(rut)
    } catch (error) {
        globalThis.toast.success(error.detail || error)
    }
}

function onChangeRut(value) {
    const valorRut = value.replace(/[.|-]/g,'');
    const dv = valorRut.substring(valorRut.length -1)
    const rut = valorRut.substring(0, valorRut.length -1)
    form = { ...form, rut, dv }
}
</script>

<div class="row">
    <div class="col-md mb-3">
        RUT
        <InputRut bind:value={rut} class="form-control" required disabled={!es_nuevo} />
    </div>
    <div class="col-md mb-3">
        Tipo Tratamiento
        <select bind:value={form.id_tipo_tratamiento} class="form-select">
            <option value=""></option>
            {#each tipos_tratamiento as tipo}
            <option value={tipo.id_tipo_tratamiento}>{tipo.tratamiento}</option>
            {/each}
        </select>
    </div>
</div>

<div class="row">
    <div class="col-md mb-3">
        Nombres
        <input type="text" bind:value={form.nombres} class="form-control" required>
    </div>
    <div class="col-md mb-3">
        Apellido 1
        <input type="text" bind:value={form.apellido_a} class="form-control" required>
    </div>
    <div class="col-md mb-3">
        Apellido 2
        <input type="text" bind:value={form.apellido_b} class="form-control">
    </div>
</div>

<div class="row">
    <div class="col-md mb-3">
        Teléfono
        <input type="tel" bind:value={form.fono} class="form-control">
    </div>
    <div class="col-md mb-3">
        Email
        <input type="email" bind:value={form.email} class="form-control" required>
    </div>
    <div class="col-md mb-3">
        Fecha de nacimiento
        <input type="date" bind:value={form.fecha_nacimiento} class="form-control">
    </div>
</div>

<div class="row">
    <div class="col-md mb-3">
        Comuna
        <select bind:value={form.id_comuna} class="form-select">
            <option value=""></option>
        </select>
    </div>
    <div class="col-md mb-3">
        Dirección
        <input type="text" bind:value={form.direccion} class="form-control">
    </div>
</div>


<div class="row">
    <div class="col-md-2">
        {#if form.rut}
            <img src={urlPhoto} class="img-fluid" alt="imagen de persona">
        {/if}
    </div>
    <div class="col-md mb-3">
        Fotografia
        <div class="form-control">
            <input type="file" bind:this={inputFile} accept=".jpg, .jpeg, .png" on:change={() => form.photo = inputFile}>
        </div>
    </div>
</div>