<script>
    import LineEditor from '../../Components/LineEditor.svelte';
    import { name }   from '../../vcard.js';
    import { t }      from '../../translations.svelte';

    let { code, patch = (from, to) => true } = $props();

    let n = $derived(name(code));

    function onSet(oldVal,newVal){
        console.log(`onset(${oldVal} → ${newVal})`);
        const newCode = code.replace(oldVal,newVal);
        return patch(code,newCode);
    }
</script>

<div class="name">
{#if n.prefix}
<LineEditor wrapper="span" editable={true} value={n.prefix}  onSet={newVal => onSet(n.prefix,newVal)}    title={t('name_prefix')} />
{/if}
{#if n.given}
<LineEditor wrapper="span" editable={true} value={n.given}  onSet={newVal => onSet(n.given,newVal)}    title={t('given_name')} />
{/if}
{#if n.additional}
<LineEditor wrapper="span" editable={true} value={n.additional}  onSet={newVal => onSet(n.additional,newVal)}    title={t('additional_name')} />
{/if}
{#if n.family}
<LineEditor wrapper="span" editable={true} value={n.family}  onSet={newVal => onSet(n.family,newVal)}    title={t('family_name')} />
{/if}
{#if n.suffix}
<LineEditor wrapper="span" editable={true} value={n.suffix}  onSet={newVal => onSet(n.suffix,newVal)}    title={t('<name_suffix></name_suffix>')} />
{/if}
</div>