// jshint esversion: 6
'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import Row from 'react-bootstrap/lib/Row';
import {Banner} from './Banner';
import lang from '../../lang/common/index-en_US';

const INDEX_NOT_SET = -1;
const PROPERTY_NOT_SET = null;

export class TiledGrid extends React.Component<any, any> {
    static propTypes = {
        testAutomationId: PropTypes.string,
        currentItemIndex: PropTypes.number,
        cols: PropTypes.number,
        items: PropTypes.array.isRequired,
        bannerAdditionalOffset: PropTypes.number,
        closable: PropTypes.bool,
        closeLabel: PropTypes.string,
        onChange: PropTypes.func
    };

    static defaultProps = {
        cols: 2,
        bannerAdditionalOffset: 48,
        currentItemIndex: PROPERTY_NOT_SET,
        closable: true,
        get closeLabel() {
            return lang.CLOSE;
        },
        testAutomationId: 'tiledGrid',
        onChange: null
    };

    constructor(props, context) {
        super(props, context);

        let initialIndex = INDEX_NOT_SET;
        if (props.currentItemIndex !== PROPERTY_NOT_SET) {
            initialIndex = props.currentItemIndex;
        }

        this.state = {
            currentItemIndex: initialIndex
        };
    }

    componentWillReceiveProps(nextProps) {
        if (
            nextProps.hasOwnProperty('currentItemIndex') &&
            nextProps.currentItemIndex !== PROPERTY_NOT_SET
        ) {
            this.setCurrentItemIndex(nextProps.currentItemIndex);
        }
    }

    setCurrentItemIndex(index) {
        if (this.state.currentItemIndex !== index) {
            this.setState({
                currentItemIndex: index
            });

            if (this.props.onChange) {
                this.props.onChange(index);
            }
        }
    }

    getColSize() {
        let cols = this.props.cols;
        let GRID_CAPACITY = 12;
        let colSize: any = null;

        if (GRID_CAPACITY % cols === 0) {
            colSize = GRID_CAPACITY / cols;
        } else {
            throw new RangeError('Invalid cols parameter. Cols must be 1, 2, 3, 4, 6, 12');
        }

        return colSize;
    }

    getRowNumbers() {
        let items = this.props.items;
        let cols = this.props.cols;

        return Math.ceil(items.length / cols);
    }

    getActiveRow() {
        const {cols} = this.props;
        const {currentItemIndex} = this.state;

        if (currentItemIndex === INDEX_NOT_SET) {
            return null;
        }
        return Math.ceil((currentItemIndex + 1) / cols);
    }

    onCloseButtonClick() {
        this.setCurrentItemIndex(INDEX_NOT_SET);
    }

    renderItem(item, index) {
        return null;
    }

    renderItemDetails(item) {
        return null;
    }

    renderItems() {
        let {
            cols,
            items,
            testAutomationId,
            ['data-test-automation-id']: dataTestAutomationId
        } = this.props;

        let renderedItems = items.map(this.renderItem.bind(this));
        let gridItems = [];

        for (let i = 1; i <= this.getRowNumbers(); i++) {
            let rowItems = [];

            for (let j = 0; j < cols; j++) {
                rowItems.push(renderedItems.shift() as never);
            }

            gridItems.push(<Row key={`row-0-${i}`}>{rowItems}</Row> as never);

            if (this.getActiveRow() === i) {
                gridItems.push((
                    <Row className="active" key={`row-1-${i}`}>
                        <Banner
                            closable={this.props.closable}
                            closeLabel={this.props.closeLabel}
                            onClose={this.onCloseButtonClick.bind(this)}
                            arrowColsOffset={
                                (this.state.currentItemIndex % cols) * this.getColSize()
                            }
                            additionalOffset={this.props.bannerAdditionalOffset}>
                            {this.renderItemDetails(items[this.state.currentItemIndex])}
                        </Banner>
                    </Row>
                ) as never);
            }
        }

        return (
            <div
                className="rc-tiled-grid"
                data-test-automation-id={testAutomationId || dataTestAutomationId}>
                {gridItems}
            </div>
        );
    }

    render() {
        return this.renderItems();
    }
}
