<template>
    <button :class="bem({ selected, pending })" :style="{ color: hslaStr }">
        <span />
        <slot />
    </button>
</template>

<script>
// import { mapState } from 'vuex';
// import Component from '~/components/Component.vue';
// import Mixin from '~/components/Mixin.vue';
import { hsvaToHsla, hslaToStr } from '../utils/color.js';

export default {
    name: 'px-color-palette-button',
    props: {
        hsva: {
            type: Object,
            default: () => {
                return { h: 0, s: 0, v: 0, a: 0 };
            },
        },
        selected: { type: Boolean, default: false },
        pending: { type: Boolean, default: false },
    },
    // data() { return { b: 0 }; },
    computed: {
        hslaStr() {
            return hslaToStr(hsvaToHsla(this.hsva), true);
        },
    },
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>

<style lang="scss">
@use 'sass:string';
@use '../styles/px.scss' as *;

@function color-wheel-gradient($count, $blend: true, $sat: 100%, $light: 50%) {
    $grad: 'conic-gradient(';
    @for $i from 1 through $count {
        $color: hsl(360 - divide(360, $count) * $i, $sat, $light);
        $start: percentage(divide($i - 1, $count));
        $stop: percentage(divide($i, $count));
        $end: if($i == $count, ')', ',');

        @if $blend {
            $grad: '#{$grad} #{$color} #{$start}#{$end}';
        } @else {
            $grad: '#{$grad} #{$color} #{$start}, #{$color} #{$stop}#{$end}';
        }
    }

    @return string.unquote($grad);
}

.px-color-palette-button {
    @include control-reset();

    position: relative;
    aspect-ratio: 1;
    width: 2em;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    @include transition(transform, $dur: 0.2s);

    @include checkered-background(
        $width: 0.25em,
        $color: rgba(black, 0.1),
        $color-alt: transparent
    );

    > span {
        @include abs();
        border-radius: inherit;
        background-color: currentColor;
    }

    &:before,
    &:after {
        border-radius: inherit;
        @include transition(all, $dur: 0.3s);
    }

    @include before() {
        @include abs(-2px);
        border: 2px solid black;
        opacity: 0;
    }
    @include after() {
        @include abs();
        border: 1.5px solid white;
        opacity: 0;
    }

    &:hover {
        transform: scale(1.1);
    }

    &:active {
        transform: scale(1) !important;
    }

    &--selected {
        &:before,
        &:after {
            opacity: 1;
        }
    }

    &--pending > span {
        @include abs(-0.5px);
        background-color: transparent;
        background-image: color-wheel-gradient(8, false, $light: 50%);
        @include after() {
            @include abs(4px);
            background-color: rgba(white, 0.8);
            border: 0px solid white;
            border-radius: 50%;
        }
    }

    &--pending {
        color: black !important;
        // &:before {
        //     border: 1px solid rgba(black, 0.5);
        //     opacity: 1;
        // }
    }
}
</style>
