<script lang="ts">
    let open = false;

    export let list: Array<string>;
    export let activeElement: string;
    export let id: string;

    function handleDropdownOpen() {
        open = !open;
    }

    function handleSelect(newSelection: string) {
        console.log("newSelection")
        activeElement = newSelection;
        open = false;
    }
</script>

<div {id} class="dropdown-container">
    <button on:click|preventDefault={handleDropdownOpen}>{activeElement}</button>

    {#if open}
        <div class="dropdown-list">
        {#each list as listElem}
            <div class="dropdown-element" on:click|preventDefault={() => {handleSelect(listElem)}}>{listElem}</div>
        {/each}
        </div>
    {/if}
</div>

<style>
    .dropdown-container {
        position: relative;
    }

    .dropdown-list {
        position: absolute;

        max-height: 10rem;

        overflow-y: auto;

        z-index: 100;

        background-color: var(--color-bg);
        border: 1px solid var(--color-border)
    }
</style>