<script>
    import {api, post} from '../../urls.svelte'
    import { error, yikes } from '../../warn.svelte';
    import {t}   from '../../translations.svelte';

    import LineEditor from '../../Components/LineEditor.svelte';
    import Multiline  from '../../Components/MultilineEditor.svelte';
    import Users      from '../../Components/UserSelector.svelte'

    let caption = $state(t('save_object',{object:t('users')}));
    let { company } = $props();
    let btnEnabled = $state(true);
    let memberCopy = $state(JSON.parse(JSON.stringify(company.members)));

    async function getCandidates(text){
        const url  = api('user/search');
        const resp = await post(url,text);
        if (resp.ok){
            yikes();
            const input = await resp.json();
            return Object.values(input).map(user => { return {...user, display: user.name}});
        } else {
            error(resp);
            return {};
        }
    }

    async function patch(changeSet){
        const  url = api(`company/${company.id}`)
        const resp = await fetch(url,{
            credentials : 'include',
            method      : 'PATCH',
            body        : JSON.stringify(changeSet)
        });
        if (resp.ok){
            const patched = await resp.json();
            for (let key of Object.keys(patched)) company[key] = patched[key];
            return true;
        }
        error(resp);
        return false;
    }

    async function saveUsers(){
        btnEnabled = false;
        caption = t('data_sent');
        const members = Object.keys(memberCopy).map(Number);
        company.members = {};
        var success = await patch({members:members});
        if (success) caption = t('saved');
        btnEnabled = true;
    }
</script>

<svelte:head>
    <title>Umbrella – {t('company')}: {company?.name}</title>
</svelte:head>

<fieldset>
{#if company}
    <legend>{t('edit_object',{object:company.name})}</legend>
<fieldset>
    <legend>{t('name')}</legend>
    <LineEditor bind:value={company.name} editable={true} onSet={val => patch({name:val})} />
</fieldset>
<fieldset>
    <legend>{t('address')}</legend>
    <Multiline bind:value={company.address} editable={true} onSet={val => patch({address:val})} />
</fieldset>
<fieldset>
    <legend>{t('email')}</legend>
    <LineEditor bind:value={company.email} editable={true} onSet={val => patch({email:val})} />
</fieldset>
<fieldset>
    <legend>{t('phone')}</legend>
    <LineEditor bind:value={company.phone} editable={true} onSet={val => patch({phone:val})} />
</fieldset>
<fieldset>
    <legend>{t('bank_account')}</legend>
    <Multiline bind:value={company.bank_account} editable={true} onSet={val => patch({bank_account:val})} />
</fieldset>
<fieldset>
    <legend>{t('local_court')}</legend>
    <LineEditor bind:value={company.court} editable={true} onSet={val => patch({court:val})} />
</fieldset>
<fieldset>
    <legend>{t('tax_id')}</legend>
    <LineEditor bind:value={company.tax_number} editable={true} onSet={val => patch({tax_number:val})} />
</fieldset>
<fieldset>
    <legend>{t('last_customer_number')}</legend>
    <LineEditor bind:value={company.last_customer_number} editable={true} onSet={val => patch({last_customer_number:val})} />
</fieldset>
<fieldset>
    <legend>{t('customer_number_prefix')}</legend>
    <LineEditor bind:value={company.customer_number_prefix} editable={true} onSet={val => patch({customer_number_prefix:val})} />
</fieldset>
<fieldset>
    <legend>{t('members')}</legend>
    <Users bind:users={memberCopy} {getCandidates} />
    <button onclick={saveUsers} disabled={!btnEnabled} >{caption}</button>
</fieldset>
{/if}
</fieldset>
