<script lang="ts">
    let { handler = () => {}, type = "button", files = $bindable() } = $props();
    
    let file_list = $state();

    $effect(() => {
        // FileList -> Array[File]
        if (file_list) {
            let f_list: Array<File> = [];
            for (let file of file_list)
                f_list.push(file);
            files = f_list;
        }
    });
</script>

{#if type == "button"}
    <button class="plus round" style="height: 32px;" onclick={handler}>+</button>
{:else if type == "image"}
    <label class="plus round" style="height: 48px; display: inline-block;">+
        <input accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
    </label>
{:else}
    <label class="file-plus rounded">Загрузить файл
        <input style="display: none" bind:files={file_list} multiple type="file"/>
    </label>
{/if}

<style>
    /* Кнопка "плюс" */
    .plus {
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-large;
        cursor: pointer;
        text-align: center;
        align-content: center;
    }

    .file-plus {
        font-size: larger;
        cursor: pointer;
        text-align: center;
        align-content: center;
        width: 100%;
        height: 3rem;
        border: 0.15rem dashed;
        display: block;
    }

    @media (prefers-color-scheme: light) {
        .plus {
            background-color: #5C8DC0;
            color: white;
        }

        .file-plus {
            background: none;
            border-color: #5C8DC0;
            color: #5C8DC0;
        }

        .plus:hover {
            background-color: #567aa1;
        }
    }

    @media (prefers-color-scheme: dark) {
        .plus {
            background-color: #2791FF;
            color: white;
        }

        .file-plus {
            background: none;
            border-color: #2791FF;
            color: #2791FF;
        }

        .plus:hover {
            background-color: #2c7dd4;
        }
    }
</style>