import React, {Component} from 'react';
import {Container, Col, Row, Popover, PopoverHeader, PopoverBody} from 'reactstrap';

let boxCount = 0;

class WiaasBox extends Component {
    constructor(props) {
        super(props);

        if(!this.props.id){
            boxCount++;
            this.idBox = 'wiaas-box-' + boxCount;
        }else{
            this.idBox = this.props.id;
        }

        this.className = this.props.className ? 'wiaas-box ' + this.props.className : 'wiaas-box';

        this.toggleBoxVisibility = this.toggleBoxVisibility.bind(this);
        this.togglePopover = this.togglePopover.bind(this);
        this.getVisibilityIcon = this.getVisibilityIcon.bind(this);
        this.getExtraHeaderContentSize = this.getExtraHeaderContentSize.bind(this);
        this.getMainTitleContentSize = this.getMainTitleContentSize.bind(this);
        this.state = {
            isContentVisible: typeof this.props.isContentVisible !== 'undefined' ? this.props.isContentVisible : true,
            visibilityIcon: 'fa fa-minus',
            popoverOpen: false
        };
    }

    toggleBoxVisibility() {
        this.setState({
            isContentVisible: !this.state.isContentVisible,
        });
    }

    togglePopover(){
        this.setState({
            popoverOpen: !this.state.popoverOpen
        });
    }

    getVisibilityIcon() {
        return this.state.isContentVisible ? 'fa fa-minus' : 'fa fa-plus';
    }

    getMainTitleContentSize() {
        return  this.props.customHeader ? 4 : 10;
    }

    getExtraHeaderContentSize() {
        if(this.props.mainTitle) {
            return this.props.customHeader ? 7 : 1;
        }

        return 12;
    }

    render() {
        const {mainTitle, infoPopover} = this.props;
        const CustomHeader = this.props.customHeader;
        const customHeaderParams = this.props.customHeaderParams || {};

        return (
            <div className="wiaas-box-container">
                <div id={this.idBox} className={this.className} >
                    {
                    (mainTitle || CustomHeader) &&
                    <div className="wiaas-box-header">
                        <Container fluid={true}>
                            <Row>
                                {
                                    mainTitle &&
                                    <Col lg={this.getMainTitleContentSize()} xs="12">
                                        <div className="wiaas-main-title">{mainTitle}</div>
                                        <div className="wiaas-divider"></div>
                                    </Col>
                                }
                                <Col lg={this.getExtraHeaderContentSize()} md="12" xs="12">
                                    {
                                        CustomHeader && <CustomHeader params={customHeaderParams}/>
                                    }
                                </Col>
                                    {
                                        this.props.children &&
                                        <div className="wiaas-box-visibility-icon wiaas-icon" onClick={this.toggleBoxVisibility}>
                                            <i className={this.getVisibilityIcon()} aria-hidden="true"></i>
                                        </div>
                                    }
                                    {
                                        infoPopover &&
                                        <div id={'popover-' + this.idBox} onClick={this.togglePopover} className="wiaas-info-icon wiaas-icon">
                                            <i className="fa fa-question" aria-hidden="true"></i>
                                            <Popover placement="bottom"
                                                    container={this.idBox}
                                                    isOpen={this.state.popoverOpen}
                                                    target={'popover-' + this.idBox}
                                                    toggle={this.togglePopover}>
                                                <PopoverHeader>{infoPopover.title}</PopoverHeader>
                                                <PopoverBody dangerouslySetInnerHTML={{__html: infoPopover.message}}></PopoverBody>
                                            </Popover>
                                        </div>
                                    }
                            </Row>
                        </Container>
                    </div>
                    }
                    {
                        this.state.isContentVisible &&
                        <div className="wiaas-box-content">
                            {this.props.children}
                        </div>
                    }
                </div>
            </div>
        );
    }
}

export default WiaasBox;