import style from "antd/lib/input/style/index.css";

class Input {

    useModules = ["$compile", "esNgAntd"];

    require = ["^?antdFormItem", "^?antdForm"];

    state = {
        inputEventTarget: null,
    }

    constructor($element, $attrs, $controllers) {
        let [antdForm, antdFormItem] = $controllers;

        esNgAntd.createStyle("ant-input", style);

        if (antdFormItem) {
            this.antdFormItem = antdFormItem.getContext();
        }
        // 上下文
        if (antdForm) {
            this.antdForm = antdForm.getContext();
            this.antdForm.state.formItems.push($scope);
        }
        this.props.style = $attrs.style;
        $element.replaceWith($compile(this.getTemplate())($scope));
    }

    handleClick(event) {
        this.state.inputEventTarget = event;
    }

    handleChange() {
        this.props.onChange({
            event: this.state.inputEventTarget
        });
    }

    getTemplate() {
        let maxLengthAttribute = "";
        let styleAttribute = "";
        let idAttribute = "";
        if (this.props.maxLength) {
            maxLengthAttribute = `maxlength="${this.props.maxLength}"`;
        }
        if (this.props.style) {
            styleAttribute = `style="${this.props.style}"`
        }
        if (this.antdFormItem && this.antdFormItem.name) {
            idAttribute = `id="${this.antdFormItem.name}"`;
        }
        let templates = [
            `<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,
            `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
        <span class="ant-input-wrapper ant-input-group" style="">
            <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span>
            <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" style="${this.props.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
            <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
        </span>
    </span>`,
        ];
        if (this.props.addonBefore || this.props.addonAfter) {
            return templates[1]
        } else {
            return templates[0];
        }
    }
}

Input.propTypes = {
    value: PropTypes.string,
    placeholder: PropTypes.string,
    addonBefore: PropTypes.string,
    addonAfter: PropTypes.string,
    disabled: PropTypes.boolean,
    onChange: PropTypes.function,
    maxLength: PropTypes.number,
};