import React from 'react';
import { Card, Fa } from '../../../components';
import { format } from '../../../commons/utils';
import FollowupCalendar from './followup-calendar';
import CalendEditor from './calend-editor';
import { server } from '../../../commons/server';

import './treat-followup.less';

/**
 * Display the treatment followup card
 */
export default class TreatFollowup extends React.Component {

    constructor(props) {
        super(props);
        this._calendarClick = this._calendarClick.bind(this);
        this.closeEditor = this.closeEditor.bind(this);

        this.state = { selBtn: 'DOTS' };
    }

    _buttonClick(key) {
        return () => {
            this.setState({ selBtn: key });
        };
    }

    _calendarClick(data) {
        // calendar is being edited already
        if (this.state.editor) {
            return;
        }

        // create a copy of the data
        if (this.props.tbcase.state === 'ONTREATMENT') {
            this.setState({ editor: data });
        }
    }

    closeEditor(data) {
        if (data) {
            const self = this;

            return this.saveData(data).then(() => {
                const lst = self.props.treatment.followup;
                const index = lst.indexOf(self.state.editor);
                lst[index] = data;
                self.setState({ editor: null });
            });
        }

        this.setState({ editor: null });
        return null;
    }

    /**
     * Post follow-up data to the server in order to update the treatment followup
     * of a given year/month
     */
    saveData(data) {
        const req = {
            caseId: this.props.tbcase.id,
            year: data.year,
            month: data.month,
            days: data.days
        };

        return server.post('/api/cases/case/treatment/followup', req).then(res => {
            if (res.success) {
                return;
            }

            throw new Error(res.error);
        });
    }

    renderLegend() {
        return React.createElement(
            'div',
            { className: 'treat-legend' },
            React.createElement(Fa, { icon: 'circle', className: 'treat-DOTS' }),
            __('TreatmentDayOption.DOTS'),
            React.createElement(Fa, { icon: 'circle', className: 'treat-SELF_ADMIN' }),
            __('TreatmentDayOption.SELF_ADMIN'),
            React.createElement(Fa, { icon: 'circle', className: 'treat-NOT_TAKEN' }),
            __('TreatmentDayOption.NOT_TAKEN')
        );
    }

    renderCalendars() {
        const lst = this.props.treatment.followup;
        if (!lst) {
            return null;
        }

        const editor = this.state.editor;

        const res = [];
        lst.forEach(item => {
            const key = item.year * 100 + item.month;

            // count the number of days
            let daysCount = 0;
            if (item.days) {
                item.days.forEach(day => {
                    if (day.status !== 'NOT_TAKEN') {
                        daysCount++;
                    }
                });
            }

            const txt = __('cases.treat.disp') + ': ' + format(__('cases.treat.days'), daysCount, item.plannedDays);

            res.push(React.createElement(
                'div',
                { key: key, className: 'pull-left' },
                React.createElement(
                    FollowupCalendar,
                    { key: key,
                        className: 'treat-cal',
                        data: item,
                        onClick: this._calendarClick },
                    React.createElement(
                        'div',
                        { className: 'treat-info' },
                        txt
                    )
                ),
                editor === item && React.createElement(CalendEditor, { data: editor, onClose: this.closeEditor })
            ));
        });

        const clazz = 'treat-table' + (this.state.editor ? ' readonly' : '');

        return React.createElement(
            'div',
            { className: clazz },
            res
        );
    }

    render() {
        return React.createElement(
            Card,
            { title: __('cases.details.treatment.medintake') },
            React.createElement(
                'div',
                { className: 'treat-followup' },
                this.renderLegend(),
                this.renderCalendars()
            )
        );
    }
}

TreatFollowup.propTypes = {
    treatment: React.PropTypes.object.isRequired,
    tbcase: React.PropTypes.object.isRequired
};