<template>
    <div
        :class="[prefixCls + '-alpha']"
        tabindex="0"
        @click="$el.focus()"
        @keydown.esc="handleEscape"
        @keydown.left="handleLeft"
        @keydown.right="handleRight"
        @keydown.up="handleUp"
        @keydown.down="handleDown"
    >
        <div :class="[prefixCls + '-alpha-checkboard-wrap']">
            <div :class="[prefixCls + '-alpha-checkerboard']"></div>
        </div>
        <div
            :style="gradientStyle"
            :class="[prefixCls + '-alpha-gradient']"></div>
        <div
            ref="container"
            :class="[prefixCls + '-alpha-container']"
            @mousedown="handleMouseDown"
            @touchmove="handleChange"
            @touchstart="handleChange">
            <div
                :style="{top: 0, left: `${value.a * 100}%`}"
                :class="[prefixCls + '-alpha-pointer']">
                <div :class="[prefixCls + '-alpha-picker']"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import HSAMixin from './hsaMixin';
    import Prefixes from './prefixMixin';
    import { clamp, toRGBAString } from './utils';

    export default {
        name: 'Alpha',
        mixins: [ HSAMixin, Prefixes ],
        emits: ['change'],
        data () {
            const normalStep = 1;
            const jumpStep = 10;

            return {
                left: -normalStep,
                right: normalStep,
                up: jumpStep,
                down: -jumpStep,
                powerKey: 'shiftKey',
            };
        },
        computed: {
            gradientStyle () {
                const {r, g, b} = this.value.rgba;
                const start = toRGBAString({r, g, b, a: 0});
                const finish = toRGBAString({r, g, b, a: 1});

                return { background: `linear-gradient(to right, ${start} 0%, ${finish} 100%)` };
            }
        },
        methods: {
            change (newAlpha) {
                const { h, s, l } = this.value.hsl;
                const { a } = this.value;

                if (a !== newAlpha) {
                    this.$emit('change', {h, s, l, a: newAlpha, source: 'rgba'});
                }
            },
            handleSlide (e, direction) {
                e.preventDefault();
                e.stopPropagation();

                this.change(clamp(e[this.powerKey] ? direction : Math.round(this.value.hsl.a * 100 + direction) / 100, 0, 1));
            },
            handleChange (e) {
                e.preventDefault();
                e.stopPropagation();

                const left = this.getLeft(e);

                if (left < 0) {
                    this.change(0);
                    return;
                }

                const { clientWidth } = this.$refs.container;

                if (left > clientWidth) {
                    this.change(1);
                    return;
                }

                this.change(Math.round(left * 100 / clientWidth) / 100);
            }
        }
    };
</script>
