import style from "antd/lib/input/style/index.css";
angular.module("esNgAntd").directive("antdInput", ["$compile", "esNgAntd", function ($compile, esNgAntd) {
  return {
    restrict: "E",
    replace: true,
    transclude: true,
    scope: {
      value: "@",
      placeholder: "@",
      addonBefore: "@",
      addonAfter: "@",
      disabled: "=",
      onChange: "&",
      maxLength: "="
    },
    require: ["^?antdFormItem", "^?antdForm"],
    controller: function ($scope, $element, $attrs) {
      $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];
        }
      };
    },
    link: function ($scope, $element, $attrs, $controllers) {
      let [antdForm, antdFormItem] = $controllers;
      esNgAntd.createStyle("ant-input", style);

      if (antdFormItem) {
        $scope.antdFormItem = antdFormItem.getContext();
      } // 上下文


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

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