import React, { Component } from 'react';

import { SimpleTitle, IsoDatePicker } from 'lib/components';

import form from 'lib/form';
import validator from 'lib/validator';
import { injectIntl } from 'react-intl';

import { formatMoney, formatNumber, formatPercent, formatDate } from 'lib/i18n';

import icons from 'constants/icons';
import messages from './messages.js';
import moment from 'moment';


const STATUSES = [ "DRAFT", "ISSUED", "PAID", "CANCELLED" ];
require("./style.scss");

//TODO display billable status !!!
export default injectIntl((props) => {

    let { intl, disabled, onStatusChange, status, paymentDate, onPaymentDateChange, i18n, errors } = props;
    let buttons = [];

    for (let i = 0; i < STATUSES.length; i++) {
        let val = STATUSES[i];
        let label = intl.formatMessage(messages[val]);

        buttons.push(<button key={ val } type="button" className={ `${val} ${val === status ? "active" : ""}` } onClick={ () => typeof onStatusChange =="function" && onStatusChange(val) }>{ label }</button>);
    }

    let billableStatus = null;
    let paymentDateField = null;
    if (status == "PAID") {
        let hasError = errors && Array.isArray(errors.paymentDate) && errors.paymentDate.length;
        paymentDateField = (
            <div className="form">
                <div className={ hasError ? "form-field error" : "form-field" }>
                    <label>{ intl.formatMessage(messages.paymentDate) }</label>
                    <IsoDatePicker value={ paymentDate } onChange={ onPaymentDateChange } dateFormat={ i18n ? i18n.dateFormat : null } disabled={ disabled } />
                    {  hasError && errors.paymentDate.map((n, i) => <span key={ i }> { n.msg || intl.formatMessage({ id: n.code }, n.params) } </span>) }
                </div>
            </div>
        );
    }

    return (
        <div className={ `entityStatus ${props.className || ""}` }>
            {/* <SimpleTitle title={ intl.formatMessage(messages.title) } icon={ icons.status } /> */}

            <div className="status-buttons">
                { buttons }
            </div>

            { paymentDateField }

            <div>{ billableStatus }</div>
        </div>
    );
});

