<script>
    import { useTinyRouter } from 'svelte-tiny-router';
    import { onMount }       from 'svelte';

    import { api }           from '../../urls.svelte'
    import { error, yikes }  from '../../warn.svelte';
    import { checkUser }     from '../../user.svelte';
    import { t }             from '../../translations.svelte';

    let { user_id } = $props();
    let caption     = $state(t('save_object',{object:t('user')}));
    let editUser    = $state(null);
    let message     = $state(t('loading_data'));
    let options     = $state([]);
    const router    = useTinyRouter();
    let sent        = $state(false);

    onMount(async () => {
        let url  = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`;
        let resp = await fetch(url);
        if (resp.ok){
            const arr = await resp.json();
            for (let entry of arr){
                const value   = entry.value;
                const caption = entry.caption ? entry.caption : value;
                options.push({caption:caption,value:value})
            }
        }

        if (user_id) {
            url  = api(`user/${user_id}`);
            resp = await fetch(url,{credentials:'include'});
            if (resp.ok) {
                editUser = await resp.json();
            } else {
                message = await resp.text();
                if (message == "") message = t(resp);
            }
        } else {
            editUser = {}
        }
   });

    async function save(ev){
        ev.preventDefault();
        sent       = true;
        caption    = t('data_sent');
        let method = 'PATCH';
        let url    = null;
        if (user_id) {
            url = api(`user/${user_id}`);
        } else {
            url = api('user/create');
            method = 'POST';
        }
        let resp = await fetch(url,{
            method      : method,
            credentials : 'include',
            body        : JSON.stringify(editUser)
        });
        if (resp.ok){
            caption = t('saved');
            checkUser();
            yikes();
            router.navigate('/user');
        } else {
            error(resp);
            caption = t('failed');
            sent = false;
        }
    }
</script>

<fieldset>
    <legend>{t('editing',user_id?user_id:'')}</legend>
    {#if editUser}
    <form onsubmit={save}>
        <table>
            <tbody>
                {#if editUser.id}
                <tr>
                    <th>{t('id')}</th>
                    <td>{editUser.id}</td>
                </tr>
                {/if}
                <tr>
                    <th>{t('name')}</th>
                    <td>
                        <input type="text" bind:value={editUser.name} />
                    </td>
                </tr>
                <tr>
                    <th>{t('email')}</th>
                    <td>
                        <input type="text" bind:value={editUser.email} />
                    </td>
                </tr>
                <tr>
                    <th>{t('language')}</th>
                    <td>
                        <input type="text" bind:value={editUser.language} />
                    </td>
                </tr>
                <tr>
                    <th>{t('password')}</th>
                    <td>
                        <input type="password" bind:value={editUser.password} />
                    </td>
                </tr>
                <tr>
                    <th>{t('theme')}</th>
                    <td>
                        <select bind:value={editUser.theme}>
                            {#each options as entry,i}
                            <option value={entry.value}>{entry.caption}</option>
                            {/each}
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="submit" disabled={sent}>{caption}</button>
    </form>
    {:else}
    {message}
    {/if}
</fieldset>
