<script>
    // import { listen } from '@tauri-apps/api/event';
    import { open } from '@tauri-apps/plugin-dialog';
    import { sep } from '@tauri-apps/api/path';
    import { createEventDispatcher } from 'svelte';

    import Icon from './Icon.svelte';


    export let value = {};
    export let params = {};
    let displayValue = value?.name || '';

    const dispatch = createEventDispatcher();

    async function chooseFile() {
        let file = await open(params);
        if (file) {
            value = file;
            displayValue = file.name;
            dispatch('update', value);
        }
    }

    function handleInput(evt) {
        const segments = evt.target.value.split(sep());
        const name = segments[segments.length - 1];
        value = {name, path: evt.target.value};
    }

    // some day, figure out drag-and-drop
    // let drag = null;
    // listen('tauri://drag', e => drag = e);
    // listen('tauri://drop', e => console.log(e));
    // listen('tauri://drag-cancelled', e => console.log(e));
    // listen('tauri://drop-over', e => console.log(e));

</script>


<div class="relative flex join has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
    <button type="button" class="btn btn-neutral join-item" on:click={chooseFile}>
        Choose file
    </button>
    <input 
        type="text"
        class="join-item grow input input-bordered border-l-0 bg-transparent focus:outline-none"
        value={displayValue}
        on:input={handleInput}
        on:change={() => dispatch('update', value)}
        on:focus on:blur
    >
</div>
