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

    import LineEditor        from '../../Components/LineEditor.svelte';
    import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
    import PriceEditor       from '../../Components/PriceEditor.svelte';

    var {
        currency,
        drop = (number) => {},
        editable,
        movePos = (number,step) => {},
        pos     = $bindable(null),
        submit  = (key,newVal) => {}
    } = $props();
    let prefix = `pos.${pos.number}`

    function moveup(){
        movePos(pos.number,-1);
    }

    function movedown(){
        movePos(pos.number,1);
    }
</script>

<style>
    .move{
        vertical-align: middle;
    }

    tr > *:nth-child(1){
        text-align: right;
    }

</style>
{#if pos}
    <tr>
        <td>{pos.number}</td>
        <td class="item">
            <LineEditor bind:value={pos.item} editable={editable} onSet={(val) => submit(`${prefix}.item`,val)} />
        </td>
        <td class="title">
            <LineEditor bind:value={pos.title} editable={editable} onSet={(val) => submit(`${prefix}.title`,val)} />
        </td>
        <td class="amount">
            <LineEditor bind:value={pos.amount} editable={editable} onSet={(val) => submit(`${prefix}.amount`,val)} />
        </td>
        <td class="unit">
            <LineEditor bind:value={pos.unit} editable={editable} onSet={(val) => submit(`${prefix}.unit`,val)} />
        </td>
        <td class="price">
            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} onSet={(val) => submit(`${prefix}.unit_price`,val)} /></td>
        <td class="price">
            {Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}
        </td>
        <td class="tax">
            {pos.tax}&nbsp;%
        </td>
    </tr>
    <tr>
        <td class="move">
            {#if editable}
            {#if pos.number>1}
            <span onclick={moveup}>⏫</span>
            {/if}
            <span onclick={() => drop(pos.number)}>❌</span>
            <span onclick={movedown}>⏬</span>
            {/if}
        </td>
        <td colspan="6" class="description">
            <MarkdownEditor bind:value={pos.description} editable={editable} onSet={(val) => submit(`${prefix}.description`,val)} />
        </td>
        <td></td>
    </tr>
{/if}