<template>
    <button class="button-comp" :class="type != null ? `button-comp--${type}` : `button-comp--default`">
        <div class="button-comp__ripple" @mousedown="startWave" ref="refRipple">
            <div class="button-comp__content">{{ value }}</div>
        </div>
        <TransitionGroup name="button-comp__ripple-wave--transition">
            <div
                class="button-comp__ripple-wave"
                v-for="wave in waves"
                :key="wave.id"
                :style="{ left: `${wave.x}px`, top: `${wave.y}px` }"
            ></div>
        </TransitionGroup>
    </button>
</template>

<script setup lang="ts">
import { ref } from "vue";
interface wave {
    x: number;
    y: number;
    id: number;
}

defineProps<{ value: string; type: "default" | "primary" | "disabled" | undefined }>();

//#region handling ripple waves
const refRipple = ref<HTMLDivElement | undefined>(undefined);
const waves = ref<wave[]>([]);

function startWave(event: MouseEvent | TouchEvent) {
    if (!refRipple.value || (event.type !== "mousedown" && event.type !== "touchstart")) return;

    const rect = refRipple.value.getBoundingClientRect();
    let x, y;
    const id = Math.random();

    if (event instanceof MouseEvent) {
        x = event.clientX - rect.left - 80;
        y = event.clientY - rect.top - 80;
    } else {
        x = event.changedTouches[0].clientX - rect.left - 80;
        y = event.changedTouches[0].clientY - rect.top - 80;
    }

    let wave = { x, y, id };
    addWave(wave);

    setTimeout(() => {
        removeWave(wave);
    }, 800);
}

function addWave(wave: wave) {
    waves.value.push(wave);
}

function removeWave(wave: wave) {
    waves.value = waves.value.filter((x) => x.id !== wave.id);
}
//#endregion
</script>

<style lang="scss">
.button-comp {
    position: relative;
    border-radius: r(3);
    height: auto;
    min-width: r(88);
    line-height: 1.4;
    font-size: r(18);
    text-transform: uppercase;
    letter-spacing: 0;
    color: color("ui-color-on-background");

    cursor: pointer;

    user-select: none;
    overflow: hidden;
    outline: none;
    border: none;

    transition: background-color 0.18s ease;

    &--default {
        background: color("main-background", $lightness: -0%);
        // box-shadow: 0 r(2) r(2) 0 color("ui-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-color", $alpha: -0.8),
        //     0 r(1) r(5) 0 color("ui-color", $alpha: -0.88);
        color: color("main-color");

        &:hover {
            background: color("main-background", $lightness: -6%);
        }
    }

    &--primary {
        background: color("theme-color");
        box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
            0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);

        &:hover {
            background: color("theme-color", $lightness: -3%);
        }
    }

    &--disabled {
        background: color("ui-background");
        box-shadow: 0 r(2) r(2) 0 color("ui-background", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-background", $alpha: -0.8),
            0 r(1) r(5) 0 color("ui-background", $alpha: -0.88);

        &:hover {
            background: color("ui-background", $lightness: -3%);
        }
    }

    &__ripple {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: r(12) r(30);
    }

    &__ripple-wave {
        position: absolute;
        width: r(160);
        height: r(160);
        border-radius: 50%;
        background: black;
        pointer-events: none;
        opacity: 0;
        transform: scale(2);

        &--transition {
            &-enter-active {
                transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
                transition-property: opacity, transform;
            }
            &-enter-from {
                opacity: 0.26;
                transform: scale(0.26);
            }
        }
    }

    &__content {
        color: inherit;
    }
}
</style>
