'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import Navbar from 'react-bootstrap/lib/Navbar';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import {Icon} from './Icon';
import {Button} from './Button';
import {translate} from '../../utils';
import {getSilentRouterHistory} from '..';
import {FocusHelper} from '../utils/FocusHelper';
import lang from '../../lang/common/index-en_US';

export class HeaderToolbar extends React.Component<any> {
    static get contextTypes() {
        return {
            history: PropTypes.object,
            buttonCol: PropTypes.number
        };
    }

    static propTypes = {
        testAutomationId: PropTypes.string,
        backButtonTestAutomationId: PropTypes.string,
        title: PropTypes.string,
        buttonCol: PropTypes.number,
        backText: PropTypes.string,
        onBackButtonClick: PropTypes.func,
        backLink: PropTypes.string,
        children: PropTypes.node,
        autoFocus: PropTypes.bool,
        detailSettingForArialLabel: PropTypes.string
    };

    static defaultProps = {
        testAutomationId: 'headerToolbar',
        backButtonTestAutomationId: 'buttonBack',
        title: '',
        buttonCol: 2,
        get backText() {
            return lang.BACK;
        },
        backLink: '',
        onBackButtonClick: null,
        children: null,
        autoFocus: true,
        get detailSettingForArialLabel() {
            return lang.DETAIL_SETTING_FOR_ARIA_LABEL;
        }
    };

    componentDidMount() {
        if (this.props.autoFocus) {
            this.focusHelper.focus();
        }
    }

    focusHelper = new FocusHelper();

    handleBackIconClick() {
        let history = this.context.history || getSilentRouterHistory();

        let handleHistory = true;
        if (this.props.onBackButtonClick) {
            handleHistory = this.props.onBackButtonClick();
        }

        if (handleHistory === false) {
            return;
        }

        if (this.props.backLink) {
            history.push(this.props.backLink);
        } else {
            history.goBack();
        }
    }

    render() {
        let buttonCol = this.props.buttonCol;
        let textCol = 12 - buttonCol * 2;
        const {title, detailSettingForArialLabel} = this.props;

        return (
            <Navbar
                fluid
                className="header-toolbar"
                data-test-automation-id={this.props.testAutomationId}
                tabIndex={0}
                ref={this.focusHelper.setEl}
                aria-label={translate(detailSettingForArialLabel, {detailName: title})}>
                <Row>
                    {buttonCol > 0 && (
                        <Col xs={buttonCol}>
                            <Navbar.Form pullLeft>
                                <Button
                                    bsStyle="link"
                                    onClick={this.handleBackIconClick.bind(this)}
                                    data-test-automation-id={this.props.backButtonTestAutomationId}>
                                    <Icon name="chevron-left-big" className="back-icon" />
                                    {translate(this.props.backText)}
                                </Button>
                            </Navbar.Form>
                        </Col>
                    )}
                    <Col xs={textCol}>
                        <Navbar.Header>
                            <Navbar.Brand>
                                <h1 data-test-automation-id="title">{this.props.title}</h1>
                            </Navbar.Brand>
                        </Navbar.Header>
                    </Col>
                    <Col xsOffset={8}>{this.props.children}</Col>
                </Row>
            </Navbar>
        );
    }
}
