import React from 'react';
import { Row, Col, DropdownButton, Button, MenuItem } from 'react-bootstrap';
import { Card, Fa, WaitIcon, InlineEditor, observer } from '../../../components';
import { app } from '../../../core/app';
import Chart from './chart';
import TableView from './table-view';
import Indicator from './indicator';

import FiltersSelector from '../filters/filters-selector';
import VariablesSelector from './variables-selector';

/**
 * Display a card for editing of an indicator
 */
class IndicatorEditor extends React.Component {

    constructor(props) {
        super(props);
        this.filtersChange = this.filtersChange.bind(this);
        this.variablesChange = this.variablesChange.bind(this);
        this.changeSize = this.changeSize.bind(this);
        this.changeDisplay = this.changeDisplay.bind(this);
        this.changeChart = this.changeChart.bind(this);
        this.refreshClick = this.refreshClick.bind(this);
        this.titleChanged = this.titleChanged.bind(this);
        this.handleEvent = this.handleEvent.bind(this);

        // initialize an empty state
        this.state = {};
    }

    /**
     * Called when a filter is included, modified or removed
     */
    filtersChange(filterValues) {
        const ind = this.props.indicator;
        ind.schema.filters = filterValues;
    }

    handleEvent(evt, data) {
        if (this.props.indicator === data) {
            this.forceUpdate();
        }
    }

    /**
     * Called when a variable is modified
     */
    variablesChange(colVars, rowVars) {
        const ind = this.props.indicator;
        ind.schema.columnVariables = colVars;
        ind.schema.rowVariables = rowVars;
        this.forceUpdate();
    }

    refreshClick() {
        const ind = this.props.indicator;

        const schema = ind.schema;
        if (!schema.columnVariables || schema.columnVariables.length === 0 || !schema.rowVariables || schema.rowVariables.length === 0) {
            app.messageDlg({ title: 'Indicator', message: 'Please select a varibale for column and row', style: 'warning' });
            return;
        }

        const self = this;

        ind.refresh().then(() => self.setState({ fetching: false }));

        this.setState({ fetching: true });
    }

    changeSize(key) {
        this.props.indicator.schema.size = key;
        this.forceUpdate();
    }

    changeDisplay(key) {
        this.props.indicator.schema.display = key;
        this.forceUpdate();
    }

    changeChart(key) {
        this.props.indicator.schema.chart = key;
        this.forceUpdate();
    }

    /**
     * Render the indicator toolbar displayed above the chart/table
     */
    renderToolbar() {
        const ind = this.props.indicator;

        const sizes = [];
        for (var i = 1; i <= 12; i++) {
            sizes.push(i);
        }
        const displays = ['All', 'Chart only', 'Table only'];
        const charts = ['pie', 'bar', 'line', 'column', 'area', 'areaspline', 'spline'];

        return React.createElement(
            Row,
            null,
            React.createElement(
                Col,
                { sm: 8 },
                React.createElement(
                    'span',
                    { className: 'ctrl-space' },
                    React.createElement(
                        'label',
                        { className: 'text-muted' },
                        __('indicators.display') + ':'
                    ),
                    React.createElement(
                        DropdownButton,
                        { id: 'btnDisp', bsSize: 'small',
                            title: displays[ind.schema.display],
                            onSelect: this.changeDisplay },
                        displays.map((s, index) => React.createElement(
                            MenuItem,
                            { key: index, eventKey: index },
                            s
                        ))
                    )
                ),
                React.createElement(
                    'span',
                    { className: 'ctrl-space' },
                    React.createElement(
                        'label',
                        { className: 'text-muted' },
                        __('indicators.size') + ':'
                    ),
                    React.createElement(
                        DropdownButton,
                        { id: 'btnSize', bsSize: 'small',
                            title: ind.schema.size,
                            onSelect: this.changeSize },
                        sizes.map(n => React.createElement(
                            MenuItem,
                            { key: n, eventKey: n },
                            n
                        ))
                    )
                ),
                React.createElement(
                    'label',
                    { className: 'text-muted' },
                    __('indicators.chart') + ':'
                ),
                React.createElement(
                    DropdownButton,
                    { id: 'btnChart', bsSize: 'small',
                        title: ind.schema.chart,
                        onSelect: this.changeChart },
                    charts.map((s, index) => React.createElement(
                        MenuItem,
                        { key: index, eventKey: s },
                        s
                    ))
                )
            ),
            React.createElement(
                Col,
                { sm: 4 },
                React.createElement(
                    Button,
                    { bsStyle: 'default', bsSize: 'small', className: 'pull-right',
                        onClick: this.refreshClick },
                    React.createElement(Fa, { icon: 'refresh' }),
                    __('action.refresh')
                )
            )
        );
    }

    titleChanged(value) {
        this.props.indicator.schema.title = value;
        this.forceUpdate();
    }

    render() {
        const ind = this.props.indicator;
        const schema = ind.schema;
        const series = ind.selectedSeries();
        const fetching = ind.refreshing;

        const title = React.createElement(InlineEditor, { value: ind.schema.title,
            className: 'title',
            onChange: this.titleChanged });

        return React.createElement(
            Card,
            { header: title, closeBtn: true },
            React.createElement(FiltersSelector, { filters: this.props.filters,
                filterValues: schema.filters,
                onChange: this.filtersChange }),
            React.createElement(VariablesSelector, {
                variables: this.props.variables,
                indicator: schema,
                onChange: this.variablesChange }),
            this.renderToolbar(),
            series && !fetching && React.createElement(
                'div',
                null,
                React.createElement(Chart, { series: series, type: schema.chart }),
                React.createElement(TableView, { indicator: ind })
            ),
            fetching && React.createElement(WaitIcon, { type: 'card' })
        );
    }
}

IndicatorEditor.propTypes = {
    indicator: React.PropTypes.object.isRequired,
    filters: React.PropTypes.array.isRequired,
    variables: React.PropTypes.array.isRequired
};

export default observer(IndicatorEditor, [Indicator.UPDATE_EVT]);