<template>
    <div
        ref="reference"
        tabindex="0"
        @click="handleClick"
        @keydown.esc="handleEscape"
        @keydown.enter="handleEnter"
        @keydown.left="handleArrow($event, 'x', left)"
        @keydown.right="handleArrow($event, 'x', right)"
        @keydown.up="handleArrow($event, 'y', up)"
        @keydown.down="handleArrow($event, 'y', down)"
        @blur="blurColor"
        @focus="focusColor"
    >
        <template v-for="(item, index) in list">
            <div
                :key="item + ':' + index"
                :class="[prefixCls + '-picker-colors-wrapper']">
                <div :data-color-id="index">
                    <div
                        :style="{background: item}"
                        :class="[prefixCls + '-picker-colors-wrapper-color']"
                    ></div>
                    <div
                        :ref="'color-circle-' + index"
                        :class="[prefixCls + '-picker-colors-wrapper-circle', hideClass]"></div>
                </div>
            </div>
            <br v-if="lineBreak(list, index)">
        </template>
    </div>
</template>

<script>
import Emitter from '../../mixins/emitter';
import HandleEscapeMixin from './handleEscapeMixin';
import Prefixes from './prefixMixin';
import {clamp} from './utils';

export default {
    name: 'RecommendedColors',

    mixins: [Emitter, HandleEscapeMixin, Prefixes],

    props: {
        list: {
            type: Array,
            default: undefined,
        },
    },

    data() {
        const columns = 12;
        const rows = Math.ceil(this.list.length / columns);
        const normalStep = 1;

        return {
            left: -normalStep,
            right: normalStep,
            up: -normalStep,
            down: normalStep,
            powerKey: 'shiftKey',
            grid: {x: 1, y: 1},
            rows,
            columns,
        };
    },

    computed: {
        hideClass() {
            return `${this.prefixCls}-hide`;
        },
        linearIndex() {
            return this.getLinearIndex(this.grid);
        },
        currentCircle() {
            return this.$refs[`color-circle-${this.linearIndex}`][0];
        },
    },

    methods: {
        getLinearIndex(grid) {
            return this.columns * (grid.y - 1) + grid.x - 1;
        },
        getMaxLimit(axis) {
            return axis === 'x' ? this.columns : this.rows;
        },
        handleArrow(e, axis, direction) {
            e.preventDefault();
            e.stopPropagation();

            this.blurColor();

            const grid = {...this.grid};

            if (e[this.powerKey]) {
                if (direction < 0) {
                    grid[axis] = 1;
                } else {
                    grid[axis] = this.getMaxLimit(axis);
                }
            } else {
                grid[axis] += direction;
            }

            const index = this.getLinearIndex(grid);

            if (index >= 0 && index < this.list.length) {
                this.grid[axis] = clamp(grid[axis], 1, this.getMaxLimit(axis));
            }

            this.focusColor();
        },
        blurColor() {
            this.currentCircle.classList.add(this.hideClass);
        },
        focusColor() {
            this.currentCircle.classList.remove(this.hideClass);
        },
        handleEnter(e) {
            this.handleClick(e, this.currentCircle);
        },
        handleClick(e, circle) {
            e.preventDefault();
            e.stopPropagation();

            this.$refs.reference.focus();

            const target = circle || e.target;
            const colorId = target.dataset.colorId || target.parentElement.dataset.colorId;

            if (colorId) {
                this.blurColor();
                const id = Number(colorId) + 1;
                this.grid.x = id % this.columns || this.columns;
                this.grid.y = Math.ceil(id / this.columns);
                this.focusColor();
                this.$emit('picker-color', this.list[colorId]);
                this.$emit('change', {hex: this.list[colorId], source: 'hex'});
            }
        },
        lineBreak(list, index) {
            if (!index) {
                return false;
            }

            const nextIndex = index + 1;

            return nextIndex < list.length && nextIndex % this.columns === 0;
        },
    },
};
</script>