import style from "antd/lib/input/style/index.css";
angular.module("esNgAntd").directive("esInput", function ($compile, esNgAntd) {
    return {
        controllerAs: "esInput",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            value: "@",
            placeholder: "@",
            addonBefore: "@",
            addonAfter: "@",
            disabled: "@",
            onChange: "&",
            maxLength: "@",
        },
        controller: function ($scope, $element) {
            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.esFormItem && $scope.esFormItem.name) {
                    idAttribute = `id="${$scope.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="${$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: ["?^esFormItem", "?^esForm"],
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            let [esFormItem, esForm] = $controllers;
            esNgAntd.createStyle("ant-input", style);
            $scope.esForm = esForm.getContext();
            $scope.esFormItem = esFormItem.getContext();
            $scope.style = $attrs.style;
            $scope.esForm.state.formItems.push($scope);
            $element.replaceWith($compile($scope.getTemplate())($scope));
        },
    };
});