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

    let { item, properties } = $props();

    let add_prop = $state({
        existing_prop_id : 0,
        new_prop : {
            name: null,
            unit: null
        }
    });

    async function doClone(ev){
        let url = api('stock/clone');
        let res = await post(url,{id:item.id});
        if (res.ok){
            let json = await res.json();
            yikes(res);
        } else error(res);
    }

    function byName(a,b){
        return a.name.localeCompare(b.name);
    }

    async function onsubmit(ev){
        ev.preventDefault();
        ev.stopPropagation();
        const url = api('stock/property');
        const data = {
            item : {
                id : item.id,
                owner : item.owner
            },
            add_prop : add_prop
        }
        const res = await post(url,data);
        if (res.ok){
            const prop = await res.json();
            const id = prop.id;
            item.properties = item.properties.filter(p => p.id != id);
            item.properties.push(prop);
            yikes();
        } else error(res);
        return false;
    }

    async function update(key,newVal){
        const url = api('stock');
        const data = {
            id    : item.id,
            owner : item.owner,
        };
        data[key] = newVal;
        const res = await patch(url,data);
        if (res.ok){
            yikes();
            return true;
        }
        error(res);
        return false;
    }
</script>

{#if item}
<LineEditor wrapper="h3" editable={true} value={item.name} onSet={v => update('name',v)} />
<button class="clone symbol" title={t('clone')} onclick={doClone}></button>
<div>
    {@html item.description.rendered}
</div>
<table>
    <tbody>
        <tr>
            <td>
                {t('ID')}
            </td>
            <td>
                <LineEditor wrapper="span" editable={true} value={item.code} onSet={v => update('code',v)} />
            </td>
        </tr>
        {#each item.properties.toSorted(byName) as prop}
        <tr>
            <td>
                {prop.name}
            </td>
            <td>
                {prop.value}
                {prop.unit}
            </td>
        </tr>
        {/each}
        <tr>
            <td>
                <select bind:value={add_prop.existing_prop_id}>
                    <option value={0}>{t('select_property')}</option>
                    {#each properties as p}
                    <option value={p.id}>
                        {p.name}
                        {#if p.unit}({p.unit}){/if}
                    </option>
                    {/each}
                </select><br/>
                {#if !add_prop.existing_prop_id}
                <input type="text" placeholder={t('new_property')} bind:value={add_prop.new_prop.name} />
                {/if}
            </td>
            <td>
                <form {onsubmit}>
                <input type="text" placeholder={t('value')} bind:value={add_prop.value} />
                {#if !add_prop.existing_prop_id}
                <input type="text" placeholder={t('unit')} bind:value={add_prop.new_prop.unit} />
                {:else}
                {properties.filter(p => p.id == add_prop.existing_prop_id)[0].unit}
                {/if}
                <button>{t('save')}</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>
{/if}
