import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Col from 'react-bootstrap/lib/Col';

import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import {Panel} from '../../Panel';
import {Block} from '../../Block';
import {Row} from '../../Row';

const VIEW_MODE_DETAILS = 'VIEW_MODE_DETAILS';
const VIEW_MODE_FULL = 'VIEW_MODE_FULL';

export class CommonListLayout extends React.Component {
    static propTypes = {
        renderCounterText: PropTypes.func.isRequired,
        renderPagination: PropTypes.func.isRequired,
        className: PropTypes.string,
        testAutomationId: PropTypes.string,
        list: PropTypes.node.isRequired,
        viewMode: PropTypes.oneOf([VIEW_MODE_DETAILS, VIEW_MODE_FULL]),
        details: PropTypes.node,
        head: PropTypes.node,
        subhead: PropTypes.node,
        filters: PropTypes.node,
        filtersColSize: PropTypes.number,
        actions: PropTypes.node,
        actionsColSize: PropTypes.number,
        listActions: PropTypes.node,
        subFooter: PropTypes.node,
        withoutToolbarGap: PropTypes.bool,
        isTransparent: PropTypes.bool,
        hasPagination: PropTypes.bool,
        listShortViewCol: PropTypes.number,
        detailsShortViewCol: PropTypes.number,
        cancelMinHeight: PropTypes.bool,
        withoutGrid: PropTypes.bool
    };

    static defaultProps = {
        className: null,
        testAutomationId: 'panel',
        viewMode: VIEW_MODE_FULL,
        details: null,
        head: null,
        subhead: null,
        filters: null,
        filtersColSize: 7,
        actions: null,
        actionsColSize: 5,
        listActions: null,
        subFooter: null,
        withoutToolbarGap: false,
        isTransparent: false,
        hasPagination: true,
        listShortViewCol: 4,
        detailsShortViewCol: 8,
        cancelMinHeight: false,
        withoutGrid: false
    };

    static VIEW_MODE_DETAILS = VIEW_MODE_DETAILS;
    static VIEW_MODE_FULL = VIEW_MODE_FULL;

    renderListActionsToolbar() {
        if (!this.props.listActions) {
            if (this.props.viewMode === VIEW_MODE_FULL) {
                return null;
            } else if (!this.props.withoutToolbarGap) {
                return <div className="rc-list-actions-toolbar-gap" />;
            }

            return null;
        }

        const classes = classnames({
            'bottom-border': this.props.viewMode === VIEW_MODE_FULL
        });

        return (
            <div className={classes}>
                <ButtonToolbar className="no-offset cta-toolbar">
                    {this.props.listActions}
                </ButtonToolbar>
            </div>
        );
    }

    renderHeader() {
        let middleSection = null;
        const {filtersColSize, actionsColSize, filters, actions, head, subhead} = this.props;

        if (!filters && !actions && !head && !subhead) {
            return null;
        }

        if (filters || actions) {
            middleSection = (
                <Block noOffset>
                    <Row>
                        <Col xs={filtersColSize}>{filters}</Col>
                        <Col xs={actionsColSize}>
                            <div className="pull-right">{actions}</div>
                        </Col>
                    </Row>
                </Block>
            );
        }

        return (
            <div>
                <Block cancelTopOffset cancelHorizontalOffset>
                    {head}
                </Block>
                {middleSection}
                {subhead}
            </div>
        );
    }

    renderFooter() {
        const {viewMode, subFooter, renderCounterText, renderPagination, withoutGrid} = this.props;

        if (withoutGrid || viewMode !== VIEW_MODE_FULL) {
            return null;
        }

        let paginationBlock = null;

        if (this.props.hasPagination) {
            paginationBlock = (
                <Col xs={9} className="vcenter text-right">
                    {renderPagination()}
                </Col>
            );
        }

        return (
            <div>
                <Block noOffset>
                    <Row>
                        <Col xs={3} className="vcenter">
                            {renderCounterText()}
                        </Col>
                        {paginationBlock}
                    </Row>
                </Block>
                {subFooter}
            </div>
        );
    }

    renderDetails() {
        return this.props.details;
    }

    renderBody() {
        const {
            viewMode,
            list,
            hasPagination,
            listShortViewCol,
            detailsShortViewCol,
            renderPagination
        } = this.props;

        if (viewMode === VIEW_MODE_FULL) {
            return <div data-test-automation-id="listContainer">{list}</div>;
        }

        let paginationBlock = null;

        if (hasPagination) {
            paginationBlock = (
                <Block addLeftOffset addRightOffset>
                    <Row>
                        <Col xs={12}>
                            <div className="pull-right">{renderPagination(false)}</div>
                        </Col>
                    </Row>
                </Block>
            );
        }

        return (
            <Row className="rc-list-wrapper">
                <Col xs={listShortViewCol} className="rc-list-left">
                    <Panel noPadding noLeftBorder>
                        <Block data-test-automation-id="listContainer">{list}</Block>
                        {paginationBlock}
                    </Panel>
                </Col>
                <Col
                    xs={detailsShortViewCol}
                    data-test-automation-id="detailsContainer"
                    className="rc-list-details-container">
                    {this.renderDetails()}
                </Col>
            </Row>
        );
    }

    renderPanelBody() {
        if (this.props.withoutGrid) {
            return null;
        }
        return (
            <Row>
                <Col xs={12}>
                    {this.renderListActionsToolbar()}
                    {this.renderBody()}
                </Col>
            </Row>
        );
    }

    render() {
        const {isTransparent, cancelMinHeight} = this.props;

        return (
            <Panel
                testAutomationId={this.props.testAutomationId}
                className={classnames(this.props.className, 'rc-list-layout')}
                header={this.renderHeader()}
                footer={this.renderFooter()}
                isTransparent={isTransparent}
                noBorder={isTransparent}
                cancelMinHeight={cancelMinHeight}
                noPadding>
                {this.renderPanelBody()}
            </Panel>
        );
    }
}
