import style from "antd/lib/input/style/index.css";
angular
    .module("esNgAntd")
    .directive("antdInput", function ($compile, esNgAntd) {
        return {
            controllerAs: "antdInput",
            restrict: "E",
            transclude: true,
            replace: true,
            scope: {
                value: "@",
                placeholder: "@",
                addonBefore: "@",
                addonAfter: "@",
                disabled: "@",
                onChange: "&",
                maxLength: "@",
            },
            controller: function ($scope, $element, $attrs) {
                this.getContext = function () {
                    return $scope;
                };

                $scope.state = {
                    inputEventTarget: null,
                };

                $scope.handleClick = function (event) {
                    $scope.state.inputEventTarget = event;
                };

                $scope.handleChange = function () {
                    $scope.onChange({
                        event: $scope.state.inputEventTarget,
                    });
                };

                $scope.getTemplate = function () {
                    let maxLengthAttribute = "";
                    let styleAttribute = "";
                    let idAttribute = "";

                    if ($scope.maxLength) {
                        maxLengthAttribute = `maxlength="${$scope.maxLength}"`;
                    }

                    if ($scope.style) {
                        styleAttribute = `style="${$scope.style}"`;
                    }

                    if ($scope.antdFormItem && $scope.antdFormItem.name) {
                        idAttribute = `id="${$scope.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="${$scope.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
            <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
        </span>
    </span>`,
                    ];

                    if ($scope.addonBefore || $scope.addonAfter) {
                        return templates[1];
                    } else {
                        return templates[0];
                    }
                };
            },
            require: ["?^antdFormItem", "?^antdForm"],
            link: function (
                $scope,
                $element,
                $attrs,
                $controllers,
                $transclude
            ) {
                let [antdFormItem, antdForm] = $controllers;
                esNgAntd.createStyle("ant-input", style); // 上下文

                if (antdForm) {
                    $scope.antdForm = antdForm.getContext();
                    $scope.antdForm.state.formItems.push($scope);
                }

                if (antdFormItem) {
                    $scope.antdFormItem = antdFormItem.getContext();
                }

                $scope.style = $attrs.style;
                $element.replaceWith($compile($scope.getTemplate())($scope));
            },
        };
    });