import React from 'react';
import { Grid, Row, Col, Button, ButtonToolbar } from 'react-bootstrap';
import { Profile, Card, AsyncButton, ReactTable, WaitIcon, Fa } from '../../../components/index';
import Form from '../../../forms/form';
import su from '../../session-utils';

import { app } from '../../../core/app';
import { format } from '../../../commons/utils';
import SessionUtils from '../../session-utils';

import FakeCRUD from '../../../commons/fake-crud';
import CrudPagination from '../../packages/crud/crud-pagination';
import CrudCounter from '../../packages/crud/crud-counter';
import CrudController from '../../packages/crud/crud-controller';

import moment from 'moment';

const fschema = {
    controls: [{
        property: 'name',
        type: 'personName',
        label: __('Patient.name'),
        required: true,
        size: { md: 6 }
    }, {
        property: 'birthDate',
        required: false,
        type: 'date',
        label: __('Patient.birthDate'),
        size: { md: 3 }
    }]
};

/**
 * Component that displays and handle notification form
 */
export default class SearchPatient extends React.Component {

    constructor(props) {
        super(props);
        this.searchClick = this.searchClick.bind(this);
        this.eventHandler = this.eventHandler.bind(this);
        this.selectPatient = this.selectPatient.bind(this);

        // create fake-crud controller
        const casesfcrud = new FakeCRUD('/api/tbl/patient/search');
        const opts = {
            pageSize: 20,
            readOnly: true,
            editorSchema: {},
            refreshAll: false
        };

        const controller = new CrudController(casesfcrud, opts);
        this.state = { controller: controller, doc: {} };
    }

    componentWillMount() {
        const self = this;
        const handler = this.state.controller.on(evt => {
            self.eventHandler(evt);
        });
        this.setState({ handler: handler });
    }

    componentWillUnmount() {
        // remove registration
        this.state.controller.removeListener(this.state.handler);
    }

    eventHandler(evt) {
        if (evt === 'list' || evt === 'fetching-list') {
            this.forceUpdate();
        }
    }

    loadPatients() {
        this.setState({ fetching: true });
        const self = this;

        const qry = this.state.doc;

        this.state.controller.initList(qry).then(() => {
            self.setState({ fetching: false });
            self.forceUpdate();
        });
    }

    searchClick() {
        const errors = this.refs.form.validate();
        this.setState({ errors: errors });
        if (errors) {
            return;
        }

        this.loadPatients();
    }

    selectPatient(item) {
        let patientInfo;

        if (item && item.patient) {
            patientInfo = item.patient;
        } else {
            patientInfo = this.state.doc;
        }

        this.props.onSelect(patientInfo);
    }

    latestCaseRender(item) {
        // get label according to classification and diag type
        const typeLabel = app.getState().app.lists['CaseClassification' + item.classification.id][item.diagnosisType.id];

        let temporalInfo;
        if (item.diagnosisType.id === 'SUSPECT') {
            temporalInfo = format(__('cases.sit.SUSP.date'), moment(item.registrationDate).format('ll'));
        } else {
            switch (item.state.id) {
                case 'NOT_ONTREATMENT':
                    temporalInfo = format(__('cases.sit.CONF.date'), moment(item.diagnosisDate).format('ll'));break;
                case 'ONTREATMENT':
                    temporalInfo = format(__('cases.sit.ONTREAT.date'), moment(item.iniTreatmentDate).format('ll'));break;
                case 'CLOSED':
                    temporalInfo = format(__('cases.sit.OUTCOME.date'), moment(item.outcomeDate).format('ll'));break;
                default:
                    temporalInfo = null;
            }
        }

        return React.createElement(
            'div',
            null,
            React.createElement(
                'div',
                { style: { fontSize: '0.9em' }, className: 'pull-right' },
                su.caseStateDisplay(item.state)
            ),
            React.createElement(
                'div',
                { className: 'bold' },
                typeLabel
            ),
            React.createElement(
                'div',
                null,
                React.createElement(Fa, { icon: 'hospital-o' }),
                item.notificationUnit.name
            ),
            React.createElement(
                'div',
                { className: 'sub-text' },
                SessionUtils.adminUnitDisplay(item.notificationUnit.adminUnit, false, true)
            ),
            React.createElement(
                'div',
                { style: { color: '#b5912f' } },
                temporalInfo
            ),
            item.state.id === 'CLOSED' && React.createElement(
                'div',
                { className: 'sub-text' },
                item.outcome
            )
        );
    }

    patientListRender() {
        const controller = this.state.controller;
        const lst = controller.getList();

        // list not initialized
        if (!lst) {
            return null;
        }

        // loading while paginating
        if (controller.isFetching()) {
            return React.createElement(
                'div',
                null,
                React.createElement(
                    Card,
                    { className: 'mtop' },
                    React.createElement(WaitIcon, { type: 'card' })
                )
            );
        }

        const newPatientHeader = lst.length > 0 ? React.createElement(
            'span',
            { style: { fontSize: '1.0em', color: '#a0a0a0' } },
            __('cases.new.msg')
        ) : null;

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { className: 'no-margin-bottom' },
                React.createElement(CrudCounter, { controller: controller }),
                React.createElement(CrudPagination, { controller: controller, showCounter: true, className: 'mtop' }),
                lst.length > 0 && React.createElement(ReactTable, { values: lst,
                    onClick: this.selectPatient,
                    columns: [{
                        title: __('Patient'),
                        size: { sm: 4 },
                        content: item => React.createElement(Profile, { type: item.patient.gender.toLowerCase(),
                            size: 'small',
                            title: su.nameDisplay(item.patient.name), subtitle: item.caseNumber })
                    }, {
                        title: __('Patient.birthDate'),
                        size: { sm: 2 },
                        content: item => moment(item.patient.birthDate).format('ll')
                    }, {
                        title: __('cases.sit.current'),
                        size: { sm: 6 },
                        content: item => this.latestCaseRender(item)
                    }] }),
                React.createElement(CrudPagination, { controller: controller, showCounter: true, className: 'mtop' })
            ),
            React.createElement(
                Card,
                { header: newPatientHeader, className: 'no-padding', style: { backgroundColor: '#f6f6f6' } },
                React.createElement(
                    Button,
                    { bsStyle: 'success', onClick: this.selectPatient },
                    __('cases.newpatient')
                )
            )
        );
    }

    render() {
        return React.createElement(
            Grid,
            { fluid: true },
            React.createElement(
                Row,
                null,
                React.createElement(
                    Col,
                    { mdOffset: 2, md: 9 },
                    React.createElement(
                        Card,
                        { title: __('cases.searchpatient'), className: 'mtop' },
                        React.createElement(
                            'div',
                            null,
                            React.createElement(Form, { ref: 'form',
                                schema: fschema,
                                doc: this.state.doc,
                                errors: this.state.errors }),
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 12 },
                                    React.createElement(
                                        ButtonToolbar,
                                        null,
                                        React.createElement(
                                            AsyncButton,
                                            {
                                                fetching: this.state.fetching,
                                                onClick: this.searchClick,
                                                bsStyle: 'primary' },
                                            'Search'
                                        ),
                                        React.createElement(
                                            Button,
                                            { bsStyle: 'link', onClick: this.props.onCancel },
                                            __('action.cancel')
                                        )
                                    )
                                )
                            )
                        )
                    ),
                    this.patientListRender()
                )
            )
        );
    }
}

SearchPatient.propTypes = {
    onSelect: React.PropTypes.func,
    onCancel: React.PropTypes.func
};