var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import moment from 'moment';
import { Grid, Row, Col } from 'react-bootstrap';
import TreatPopup from './treat-popup';
import { durationDisplay } from '../../../commons/utils';

import './treat-timeline.less';

export default class TreatTimeline extends React.Component {

    constructor(props) {
        super(props);
        this.barClick = this.barClick.bind(this);
        this._popupHide = this._popupHide.bind(this);
    }

    componentWillMount() {
        this.setState({ ini: true, ppshow: false });
        const self = this;
        setTimeout(() => self.setState({ ini: false }), 100);
    }

    SVG(props) {
        return React.createElement(
            'svg',
            { width: '100%', viewBox: '0 0 100 4' },
            props.children
        );
    }

    renderHeader(period) {
        const f = 'MMM-YYYY';
        const SVG = this.SVG;

        return React.createElement(
            SVG,
            null,
            React.createElement(
                'text',
                { x: '1', y: '2.2', fontSize: '2.5' },
                period.ini.format(f)
            ),
            React.createElement(
                'text',
                { x: '99', y: '2.2', fontSize: '2.5', textAnchor: 'end' },
                period.end.format(f)
            ),
            React.createElement(
                'text',
                { x: '50', y: '2.2', fontSize: '2.5', textAnchor: 'middle' },
                durationDisplay(period.ini, period.end)
            ),
            React.createElement('line', { x1: '0', y1: '3.2', x2: '100', y2: '3.2', stroke: '#a0a0a0', strokeWidth: '0.1' }),
            React.createElement('line', { x1: '0', y1: '2', x2: '0', y2: '4', stroke: '#a0a0a0', strokeWidth: '0.1' }),
            React.createElement('line', { x1: '100', y1: '2', x2: '100', y2: '4', stroke: '#a0a0a0', strokeWidth: '0.1' })
        );
    }

    barClick(period) {
        const self = this;
        return evt => {
            const target = evt.target;
            const show = self.state.pptarget !== target;
            setTimeout(() => self.setState({
                pptarget: show ? target : null,
                data: period,
                ppshow: show
            }), 100);
        };
    }

    _popupHide() {
        this.setState({ ppshow: false, target: null });
    }

    calcRect(treat, period) {
        const ini = period.ini;
        const end = period.end;

        return {
            x: ini.diff(treat.ini, 'days') / treat.days * 100,
            y: 0,
            width: end.diff(ini, 'days') / treat.days * 100,
            height: 4
        };
    }

    renderBar(pos, period) {
        const color = period.color ? period.color : '#48AA8A';

        // animation of the bars
        const props = Object.assign({}, pos);
        if (this.state.ini) {
            props.width = 0;
        }

        return React.createElement('rect', _extends({ key: period.ini,
            fill: color
        }, props, {
            rx: '1', ry: '1' }));
    }

    renderColumn(treat, periods) {
        const self = this;

        const comps = [];
        // render for each period
        periods.forEach((p, index) => {
            // calculate the position
            const pos = self.calcRect(treat, p);

            pos.onClick = self.barClick(p);
            pos.className = 'tm-column';
            // add the bar
            comps.push(self.renderBar(pos, p));

            // is there any custom text
            if (p.text) {
                comps.push(React.createElement(
                    'svg',
                    _extends({ key: 't' + index }, pos),
                    React.createElement(
                        'text',
                        { x: '1', y: '2.6', fontSize: '2', fill: 'white' },
                        p.text
                    )
                ));
            }
        });

        const SVG = this.SVG;
        return React.createElement(
            SVG,
            null,
            React.createElement('rect', { x: '0', y: '0', width: '100', height: '4', fill: '#e8e8e8', rx: '1', ry: '1' }),
            comps
        );
    }

    renderPrescColumn(treat, periods, presc) {
        const lst = periods.map(p => ({
            ini: moment(p.ini),
            end: moment(p.end),
            text: p.doseUnit + ' (' + p.frequency + '/7)',
            data: p,
            presc: presc
        }));

        return this.renderColumn(treat, lst);
    }

    render() {
        const treat = this.props.treatment;
        if (!treat) {
            return null;
        }

        // calculate the treatement period to make calculation easier
        const period = {
            ini: moment(treat.period.ini),
            end: moment(treat.period.end),
            days: null
        };

        period.days = period.end.diff(period.ini, 'days');

        // prescribed medicines
        const prescs = treat.prescriptions;

        const titleSize = { md: 3 };
        const barSize = { md: 9 };

        const units = treat.units.map(it => ({
            ini: moment(it.ini),
            end: moment(it.end),
            text: it.unit.name,
            data: it,
            color: '#E67E22' // '#2980b9'
        }));

        const SVG = this.SVG;

        return React.createElement(
            Grid,
            { fluid: true },
            React.createElement(
                Row,
                null,
                React.createElement(Col, titleSize),
                React.createElement(
                    Col,
                    barSize,
                    this.renderHeader(period)
                )
            ),
            React.createElement(
                Row,
                null,
                React.createElement(
                    Col,
                    titleSize,
                    React.createElement(
                        'b',
                        null,
                        __('TbCase.healthUnits')
                    )
                ),
                React.createElement(
                    Col,
                    barSize,
                    this.renderColumn(period, units)
                )
            ),
            prescs.map(it => React.createElement(
                Row,
                { key: it.product.id, className: 'tbl-row' },
                React.createElement(
                    Col,
                    titleSize,
                    it.product.name
                ),
                React.createElement(
                    Col,
                    barSize,
                    React.createElement(
                        SVG,
                        null,
                        this.renderPrescColumn(period, it.periods, it)
                    )
                )
            )),
            React.createElement(TreatPopup, { ref: 'popup',
                data: this.state.data,
                show: this.state.ppshow,
                onHide: this._popupHide,
                target: this.state.pptarget })
        );
    }
}

TreatTimeline.propTypes = {
    treatment: React.PropTypes.object
};