/*! @license
See the license.txt file for licensing information for third-party code that may be used in this file.
Relative to file(s) in the scripts/ directory, the license.txt file is located at ../license.txt..
 */
/* eslint key-spacing: ["error", { "align": "colon" }] */
/* eslint max-len: ["error", { "code": 250 }] */
/* eslint no-return-assign: ["off"] */
/* eslint no-multi-spaces: ["off"] */
/* eslint import/no-named-as-default-member: ["off"] */
/* eslint react/forbid-prop-types: ["off"] */
/* eslint key-spacing: ["off"] */
/* eslint jsx-a11y/no-static-element-interactions: ["off"] */
/* eslint yoda: ["error", "always", { "onlyEquality": true }] */
/* eslint no-underscore-dangle: ["off"] */

// External dependencies
import React from 'react';
import PropTypes from 'prop-types';
import includes from 'lodash/includes';
import get from 'lodash/get';
import noop from 'lodash/noop';
import isEmpty from 'lodash/isEmpty';

// Internal dependencies
import './style.css';
import Utils from '../../module_dependencies/utils.js';
const colors = {
    selectPositionGray: '#E6ECF2'
}

const base = 'dstc-settings-position';

const getTypeArray = event => get(event, 'currentTarget.dataset.origin_type', 'top_left').split('_');

class Testify_Carousel_PositionAbsolute extends React.Component {  // noinspection JSUnresolvedVariable

    static slug = 'dstc_absolute_position';

    static propTypes = {
        default:   PropTypes.string,
        name:      PropTypes.string.isRequired,
        value:     PropTypes.string,
        _onChange: noop
    };

    static defaultProps = {
        default:   'top_left',
        name:      'position',
        value:     'top_left',
        _onChange: noop,
        readonly:  false,
    };

    constructor(props) {
        super(props);
        this.hRuler = React.createRef();
        this.vRuler = React.createRef();
    }

    state = {
        value: this.props.value || this.props.default,
    };

    shouldComponentUpdate(nextProps, nextState) {
        return Utils.shouldComponentUpdate(this, nextProps, nextState);
    }

    getButtonClass(value) { return value === this.state.value ? `${base}-button-active` : `${base}-button`; }

    handleButtonOnClick = event => {

        const typeArray = getTypeArray(event);
        const value     = typeArray.join('_');

        if (! isEmpty(this.hRuler.current)) {
            if ('center' === typeArray[0]) {
                this.hRuler.current.style.backgroundColor = colors.selectPositionGray;
            } else {
                this.hRuler.current.style.backgroundColor = 'transparent';
            }

            if ('center' === typeArray[1]) {
                this.vRuler.current.style.backgroundColor = colors.selectPositionGray;
            } else {
                this.vRuler.current.style.backgroundColor = 'transparent';
            }
        }

        this.props._onChange(this.props.name, value);

        this.setState({
            value,
        });
    };

    handleButtonOnMouseEnter = event => {
        const typeArray = getTypeArray(event);

        if ('center' === typeArray[0]) {
            this.hRuler.current.style.backgroundColor = colors.selectPositionGray;
        }
        if ('center' === typeArray[1]) {
            this.vRuler.current.style.backgroundColor = colors.selectPositionGray;
        }
    };

    handleButtonOnMouseLeave = event => {
        const typeArray = getTypeArray(event);
        const value     = this.state.value.split('_');
        if ('center' === typeArray[0] && 'center' !== value[0]) {
            this.hRuler.current.style.backgroundColor = 'transparent';
        }
        if ('center' === typeArray[1] && 'center' !== value[1]) {
            this.vRuler.current.style.backgroundColor = 'transparent';
        }
    };

    renderButton(type = '') {
        if ('' !== type) {
            return (
                <div
                    className={`${this.getButtonClass(type)} ${base}-absolute`}
                    data-origin_type={type}
                    onMouseDown={this.handleButtonOnClick}
                    onMouseEnter={this.handleButtonOnMouseEnter}
                    onMouseLeave={this.handleButtonOnMouseLeave}
                />
            );
        }
        return <div className={`${base}-button-guide ${base}-absolute`} />;
    }

    render() {

        const valueArray     = this.state.value.split('_');
        let hRulerBackground = 'transparent';
        let vRulerBackground = 'transparent';
        if ('center' === valueArray[0]) {
            hRulerBackground = colors.selectPositionGray;
        }
        if ('center' === valueArray[1]) {
            vRulerBackground = colors.selectPositionGray;
        }
        return (
            <div
                id={`${base}-container`}
                className={`${base}-container`}
            >
                <div className={`${base}-hr`} ref={this.hRuler} style={{ backgroundColor: hRulerBackground }} />
                <div className={`${base}-vr`} ref={this.vRuler} style={{ backgroundColor: vRulerBackground }} />

                <div className={`${base}-control-guide ${base}-absolute`}>
                    <div className={`${base}-control-inner-top`}>
                        {this.renderButton()}
                        {this.renderButton()}
                        {this.renderButton()}
                    </div>
                    <div className={`${base}-control-inner-mid`}>
                        {this.renderButton()}
                        {this.renderButton()}
                        {this.renderButton()}
                    </div>
                    <div className={`${base}-control-inner-bottom`}>
                        {this.renderButton()}
                        {this.renderButton()}
                        {this.renderButton()}
                    </div>
                </div>

                <div className={`${base}-control-frame ${base}-absolute`} />

                <div className={`${base}-control-guide ${base}-absolute`}>
                    <div className={`${base}-control-inner-top`}>
                        {this.renderButton('top_left')}
                        {this.renderButton('top_center')}
                        {this.renderButton('top_right')}
                    </div>
                    <div className={`${base}-control-inner-mid`}>
                        {this.renderButton('center_left')}
                        {this.renderButton('center_center')}
                        {this.renderButton('center_right')}
                    </div>
                    <div className={`${base}-control-inner-bottom`}>
                        {this.renderButton('bottom_left')}
                        {this.renderButton('bottom_center')}
                        {this.renderButton('bottom_right')}
                    </div>
                </div>
            </div>
        );
    }
}

export default Testify_Carousel_PositionAbsolute;