export default {
    props: {
        row: {
            type: Number,
            required: true,
        },
        column: {
            type: Number,
            required: true,
        },
        isEditingAllowed: {
            type: Boolean,
            required: false,
            default: true,
        },
        isSelected: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    data: () => ({
        isFocused: false,
        isEditing: false,
    }),
    methods: {
        onFocusElement(event) {
            const { detail: { isFocused } } = event;

            this.isFocused = isFocused;
        },
        onFocusLost() {
            this.isEditing = false;
            this.isFocused = false;
        },
        onClick() {
            this.isFocused = true;
        },
        onDblClick() {
            if (this.isEditingAllowed) {
                this.isFocused = !this.isFocused;
                this.isEditing = !this.isEditing;
            }
        },
        onKeyDown(event) {
            const { keyCode } = event;
            let element;

            switch (keyCode) {
            case 13:
                // Key: ENTER
                if (this.isEditingAllowed) {
                    element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
                    this.isEditing = !this.isEditing;
                }
                break;
            case 37:
                // Key: LEFT
                element = document.querySelector(`.keyboard-navigable-${this.column - 1}-${this.row}`);
                break;
            case 38:
                // Key: UP
                element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row - 1}`);
                break;
            case 39:
            case 9:
                // Key: RIGHT || TAB
                element = document.querySelector(`.keyboard-navigable-${this.column + 1}-${this.row}`);
                if (!element) {
                    // We get out of bounds - go to the next line
                    element = document.querySelector(`.keyboard-navigable-0-${this.row + 1}`);
                }
                break;
            case 40:
                // Key: DOWN
                element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row + 1}`);
                break;
            default: break;
            }

            if (element) {
                if (keyCode !== 13) {
                    // Emit event to next focused element - it won't know if it is focused otherwise
                    element.dispatchEvent(new CustomEvent('onFocusElement', {
                        detail: { isFocused: true },
                    }));
                    element.focus();
                }
            }
        },
    },
};