<script>
    import { 
        sendMessage, 
        files_to_choose, 
        files_to_display, 
        dataset_list, 
        datasetname_store, 
        loading, 
        files_store, 
        opened_file_store,
        opened_file_obj,
        selected_channels
    } from "../store";
	import { Circle } from 'svelte-loading-spinners';
    import { Chevron } from 'flowbite-svelte'
    
    let version = true;
    let selected_file;
    let selected_dataset = null;
    let show_dataset = true;
    function toggle() {     
        if (show_dataset) {
            return false;
        }
        return true;
    }

    const open_file_old = () => {
        console.log("OPENFILE");
        $datasetname_store = selected_dataset;
        $opened_file_store = selected_file;

        if (selected_dataset) {
            $loading = true;
        }

        $files_to_choose.forEach(element => {
            console.log(element);
            if (element.split("/").pop() == selected_file){
                sendMessage({
                    type: "openfile",
                    filename: element,
                    datasetname: $datasetname_store
                });
            }
        });
    }

    const open_file = (selected_file, selected_dataset) => {
        opened_file_store.set(selected_file.short_name);
        $opened_file_obj = selected_file;
        $datasetname_store = selected_dataset;

        if (selected_dataset) {
            $loading = true;
        }
        sendMessage({
            type: "openfile",
            filename: $opened_file_obj.long_name,
            datasetname: $datasetname_store,
            channel_selection: $selected_channels
        });
    }

    let show = true;
    let handleDropdown = () => {
        if (show === true) {
            show = false;  
            return;
        }
        show = true;
    }

    $: console.log("dataset", $datasetname_store);
    
    $: {
        console.log("FILES", $files_store);
        $loading = ($loading == true ) ? true : false;
    }
</script>


<!-- Version newer file browsing -->
{#if version}
    <button
    id="dropdown_button"
    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
    on:click={handleDropdown}>
    <Chevron>Files</Chevron>
    {#if $loading}
        <Circle size="20" color="white"></Circle>
    {/if}
    </button>
    {#if show}
        <ul>
            {#each $files_store as file}
                <li>
                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                    <div on:click={() => {
                        if (!file.selected) {
                            open_file(file, "");
                        }
                        file.selected = (file.selected === true) ? false : true;
                        show_dataset = (show_dataset == true) ? false : true;
                    }} >
                        {#if file.selected}&#9660;{:else}&#9654;{/if} {file.short_name}
                    </div>
                    {#if file.selected}
                        <ul>
                            {#each file.dataset_list as dataset}
                            <li>
                                <!-- svelte-ignore a11y-click-events-have-key-events -->
                                <div on:click={() => {open_file(file, dataset)}} >
                                    {dataset}
                                </div>
                            </li>
                            {/each}
                        </ul>
                    {/if}
                </li>
            {/each}
        </ul>
    {/if}
{:else}
    <!-- Choosing files with select -->
    <div class="row">
        <select class="rounded" bind:value={selected_file} >
            <option value="" disabled selected>Choose file</option>
            {#each $files_to_display as file}
            <option value={file} on:click={open_file_old}>
                {file.slice()}
            </option>
            {/each}
        </select>
    </div>
    <div class="row">
        <select class="rounded" bind:value={selected_dataset}  >
            <option value="" disabled selected>Choose dataset</option>
            {#each $dataset_list as dataset_name}
                <option value={dataset_name}  on:click={open_file_old}>
                    {dataset_name}
                </option>
            {/each}
        </select>
    </div>

{/if}
<style>
select:disabled {
    color: black;
}

li {
    cursor: pointer;
}
</style>