<script>
    import { playSound } from '../sound.js';
    import { createEventDispatcher } from 'svelte';
    import { afterUpdate } from 'svelte';

    const dispatch = createEventDispatcher();

    export let active = false;
    export let filled = false;
    export let disabled = false;
    export let centered = false;
    export let label = undefined;
    export let sound = "default";
    export let href = false;

    let classes = [];

    function click() {
        if (disabled) return;
        if (href) {
            location = href;
            return;
        }
        playSound(sound);
        dispatch('click');
    }

    afterUpdate(() => {
        classes = [];
        if (active) classes = ["active"];
        if (filled) classes = ["filled"];
        if (disabled) classes = ["disabled"];
        if (centered) classes.push("centered");
    });
</script>

<button
        type="button"
        class={classes.join(' ')}
        title={label}
        aria-label={label}
        on:click={() => click()}>
    <span class="icon">
        <slot name="icon" />
    </span>
    <slot/>
</button>

<style>
    button {
        width: 100%;
        height: fit-content;
        padding: .7em .8em;
        display: flex;
        flex-direction: row;
        align-items: center;

        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        text-align: left;

        border-radius: 8px;
        border: 2px solid var(--bg-700);

        background-color: transparent;
        color: var(--text);

        transition-property: border-color, background-color, color;
        transition-timing-function: ease-out;
        transition-duration: .1s;

        cursor: pointer;
    }

    button.centered {
        text-align: center;
        justify-content: center;
    }

    button:hover {
        background-color: color-mix(in srgb, transparent, var(--bg-700) 50%);
    }

    button:active {
        background-color: var(--bg-700);
    }

    button.active {
        background-color: var(--bg-600);
        color: var(--accent);
        border-color: var(--accent);
        text-shadow: 0px 2px 32px var(--accent);
    }

    button.active:hover {
        color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
        border-color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
        background-color: color-mix(in srgb, var(--bg-600), var(--accent) 10%);
    }

    button.active:active {
        color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
        border-color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
        background-color: color-mix(in srgb, var(--bg-600), var(--bg-800) 10%);
    }

    button.filled {
        background-color: var(--accent);
        color: var(--bg-800);
        border-color: transparent;
    }

    button.filled:hover {
        color: color-mix(in srgb, var(--bg-800), white 10%);
        background-color: color-mix(in srgb, var(--accent), white 20%);
    }

    button.filled:active {
        color: color-mix(in srgb, var(--bg-800), black 10%);
        background-color: color-mix(in srgb, var(--accent), black 20%);
    }

    button.disabled {
        color: var(--text);
        opacity: .5;
        border-color: transparent;
        cursor: initial;
    }

    button.disabled:hover {
        background-color: transparent;
    }

    button.disabled:active {
        background-color: transparent;
    }

    .icon:not(:empty) {
        height: 1.8em;
        margin-right: 8px;
    }

    .icon :global(svg) {
        height: 100%;
    }

    .centered .icon {
        margin-right: 0px;
    }
</style>
