import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import NumberCells from './NumberCells';
import EmptyCells from './EmptyCells';

/**
 * Component to render lucky number panel
 * @param props.luckyNumbers {array} array of lucky numbers
 * @param props.xlMode {string} active xl mode
 * @param props.isPortrait {boolean} application is portrait mode
 */
class XlLuckyNumbersBar extends React.Component {
    state = {
        stepIndex: -1,
    };

    getStepCellClasses = () => {
        const { stepIndex } = this.state;
        const { animationSteps } = this.props;

        const nextCellClasses = {};
        animationSteps.forEach((step, nStepIndex) => {
            const classShow = stepIndex >= nStepIndex;
            nextCellClasses[step.className] = classShow;
        });

        return nextCellClasses;
    };

    /** Start next step animation, and reset cell animation */
    startNewStep = (nextStepIndex) => {
        const { animationSteps } = this.props;

        if (nextStepIndex >= 0) {
            const { interval, className } = animationSteps[nextStepIndex];

            // Move to next step, and reset cell animation to start from first.
            this.setState(
                { stepIndex: nextStepIndex },
                () => {
                    // eslint-disable-next-line no-console
                    console.log(`step:${nextStepIndex}, ${className}  interval:${interval} [animation]`);
                    // Queue next animation step
                    setTimeout(() => this.nextAnimationStep(), interval);
                },
            );
        }
    }

    /** Try to Start next step animation */
    nextAnimationStep = () => {
        const { stepIndex } = this.state;
        const { animationSteps } = this.props;

        const nextStepIndex = stepIndex + 1;
        if (nextStepIndex < animationSteps.length) {
            this.startNewStep(nextStepIndex);
        }
    };

    /** Must detect new luckynumbers from parent, and also new steps from state so that is reset animations */
    componentWillReceiveProps(nextProps) {
        const { luckyNumbers } = this.props;

        // When luckyNumbers are changed as it was given at NMB, it must reset animation and start from step 1 again.
        const isLuckyNumbersChange = nextProps.luckyNumbers.length !== luckyNumbers.length
            || JSON.stringify(nextProps.luckyNumbers) !== JSON.stringify(luckyNumbers);

        if (isLuckyNumbersChange) {
            // eslint-disable-next-line no-console
            console.log(`start [animation]`);
            // restart step animation
            clearTimeout(this.stepTimer);
            this.setState(
                { stepIndex: -1 },
                () => {
                    this.nextAnimationStep();
                },
            );
        }
    }

    render() {
        const { stepIndex } = this.state;
        const { luckyNumbersMaxCount, luckyNumbers, isBlurred, isLuckyNumbersVisible, isPortrait } = this.props;

        const hasLuckyNumbers = !!luckyNumbers?.length;
        const stepCellClasses = this.getStepCellClasses();

        const containerClass = classnames('xlLuckyNumbersBar', {
            luckyNumberPanelLandscape: !isPortrait,
            isBlurred,
        });

        return isLuckyNumbersVisible && hasLuckyNumbers && (
            <div className={containerClass}>
                {hasLuckyNumbers && (
                    <NumberCells
                        luckyNumbers={luckyNumbers}
                        stepCellClasses={stepCellClasses}
                        stepIndex={stepIndex}
                    />
                )}
                <EmptyCells
                    luckyNumbers={luckyNumbers}
                    stepCellClasses={stepCellClasses}
                    luckyNumbersMaxCount={luckyNumbersMaxCount}
                    stepIndex={stepIndex}
                />
            </div>
        );
    }
}

XlLuckyNumbersBar.defaultProps = {
    luckyNumbers: [],
};

XlLuckyNumbersBar.propTypes = {
    luckyNumbers:          PropTypes.arrayOf(PropTypes.shape({})),
    isPortrait:            PropTypes.bool.isRequired,
    isBlurred:             PropTypes.bool.isRequired,
    isLuckyNumbersVisible: PropTypes.bool.isRequired,
    luckyNumbersMaxCount:  PropTypes.number.isRequired,
    animationSteps:        PropTypes.arrayOf(PropTypes.shape({
        className: PropTypes.string.isRequired,
        interval:  PropTypes.number.isRequired,
    })).isRequired,
};

export default XlLuckyNumbersBar;
