import React from 'react';
import TextInput from '../../atoms/text-input/text-input.jsx';
import { ModelListener } from 'front';
import ManifestItemModel from './manifest-item.js';
import { moneyFormatter } from '../../etc/format';
import '../../less/grid';
import './manifest-item.less';

/**\

    title: ManifestItem
    category: component
    description:
        An editable line item for an order manifest
    props:
        hidePrice[Boolean]:
            toggles the visiblity of the price caluculations
            on a line item
        fieldChange[Function]:
            a callback triggered on a change event of any of
            the inputs that only sends the name of the changed
            field as the first parameter
        onClose[Function]:
            a callback triggered by a click on the remove button
        focusOn[String]:
            sets the focus on the field specified

\**/
class ManifestItem extends ModelListener {
    static defaultProps = {
        model: ManifestItemModel,
        hidePrice: false
    };

    constructor(props) {
        super(props);
        this.formatter = moneyFormatter('en-US');
    }

    checkMySatisfaction() {
        /* istanbul ignore if: no one cares */
        if (typeof this.props.fieldChange !== 'function') {
            return;
        }

        if (this.model.description && this.model.description.length) {
            this.props.fieldChange('description');
            return;
        }

        if (this.model.qty !== null) {
            this.props.fieldChange('qty');
            return;
        }

        if (this.model.price !== null) {
            this.props.fieldChange('price');
            return;
        }
    }

    remove() {
        /* istanbul ignore else: no one cares */
        if (typeof this.props.onClose === 'function') {
            this.props.onClose(this);
        }
    }

    render() {
        const total = this.model.total() || 0;
        let classer = 'manifest-item row',
            closer, price, totalView;

        if (this.props.onClose) {
            closer = (
                <div className="remove"
                    onClick={ this.remove.bind(this) }>
                    &times;
                </div>
            );
        }

        if (!this.props.hidePrice) {
            classer += ' t50-16-16-16';
            price = (
                <TextInput placeholder="$0.00"
                    value={ this.model.price }
                    format="money"
                    update={ this.update.bind(this, 'price') }
                    blur={ this.checkMySatisfaction.bind(this) }
                    setFocus={ this.props.focusOn === 'qty' } />
            );

            totalView = (
                <div>
                    <div className="total money">
                        { this.formatter(total) }
                    </div>
                </div>
            );
        } else {
            classer += ' t75-25';
        }

        return (
            <div className={ classer }>
                <TextInput placeholder="Add Item"
                    value={ this.model.description }
                    update={ this.update.bind(this, 'description') }
                    blur={ this.checkMySatisfaction.bind(this) }
                    setFocus={ this.props.focusOn === 'price' } />
                <TextInput placeholder="0"
                    value={ this.model.qty }
                    format="number"
                    update={ this.update.bind(this, 'qty') }
                    blur={ this.checkMySatisfaction.bind(this) }
                    setFocus={ this.props.focusOn === 'description' } />
                { price }
                { totalView }
                { closer }
            </div>
        );
    }
}

export default ManifestItem;
