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

class Input {

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

    props = {
        value: String,
        placeholder: String,
        addonBefore: String,
        addonAfter: String,
        disabled: Boolean,
        onChange: Function,
        maxLength: Number
    };

    state = {
        inputEventTarget: null,
    }

    constructor(esFormItem, esForm) {
        esNgAntd.createStyle("ant-input", style);
        this.esForm = esForm.getContext();
        this.esFormItem = esFormItem.getContext();
        this.props.style = $attrs.style;
        this.esForm.state.formItems.push($scope);
        $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.esFormItem && this.esFormItem.name) {
            idAttribute = `id="${this.esFormItem.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];
        }
    }
}