import React from 'react';
import { Row, Col, Button, ButtonGroup, Checkbox } from 'react-bootstrap';
import { Card, Fa, InlineEditor } from '../../../components';
import FiltersSelector from '../filters/filters-selector';

/**
 * Display the report header for editing
 */
export default class ReportHeader extends React.Component {

    constructor(props) {
        super(props);
        this.titleChanged = this.titleChanged.bind(this);
        this.saveClick = this.saveClick.bind(this);
        this.filtersChanged = this.filtersChanged.bind(this);
        this.dashboardClick = this.dashboardClick.bind(this);
        this.generate = this.generate.bind(this);
    }

    dashboardClick(evt) {
        const value = evt.target.checked;
        this.props.report.schema.dashboard = value;
        this.forceUpdate();
    }

    generate() {
        const rep = this.props.report;
        const self = this;

        rep.generate().then(() => self.forceUpdate());
    }

    close() {
        console.log('close');
    }

    saveClick() {
        this.props.report.save().then(() => this.forceUpdate());
    }

    filtersChanged(filterValues) {
        this.props.report.schema.filters = filterValues;
        this.forceUpdate();
    }

    /**
     * Called when the title of the report is changed
     */
    titleChanged(title) {
        this.props.report.schema.title = title;
        this.forceUpdate();
    }

    render() {
        const report = this.props.report;

        const header = React.createElement(
            Row,
            null,
            React.createElement(
                Col,
                { sm: 8 },
                React.createElement(
                    'div',
                    null,
                    React.createElement(InlineEditor, { value: report.schema.title,
                        className: 'title',
                        onChange: this.titleChanged })
                )
            ),
            React.createElement(
                Col,
                { sm: 4, xs: 12 },
                React.createElement(
                    ButtonGroup,
                    { bsSize: 'sm', justified: true },
                    React.createElement(
                        Button,
                        { href: '#', onClick: this.saveClick },
                        React.createElement(Fa, { icon: 'save' }),
                        __('action.save')
                    ),
                    React.createElement(
                        Button,
                        { href: '#' },
                        React.createElement(Fa, { icon: 'close' }),
                        __('action.close')
                    )
                )
            )
        );

        const btnSubmit = React.createElement(
            'div',
            { className: 'pull-right' },
            React.createElement(
                Button,
                { bsStyle: 'success', onClick: this.generate },
                __('action.generate')
            )
        );

        return React.createElement(
            Card,
            { header: header, className: 'rep-editor' },
            React.createElement(
                Checkbox,
                { checked: report.schema.dashboard, onClick: this.dashboardClick },
                __('indicators.showdashboard')
            ),
            React.createElement(FiltersSelector, {
                filters: this.props.filters,
                filterValues: report.schema.filters,
                onChange: this.filtersChanged,
                footer: btnSubmit
            })
        );
    }
}

ReportHeader.propTypes = {
    report: React.PropTypes.object.isRequired,
    filters: React.PropTypes.array.isRequired
};