import template from "./Button.html";
import style from "antd/lib/button/style/index.css";
angular.module("esNgAntd").directive("esButton", function (esNgAntd) {
    return {
        controllerAs: "esButton",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            type: "@",
            size: "@",
            ghost: "@",
            loading: "@",
            htmlType: "@",
        },
        template: template,
        controller: function ($scope, $element, $attrs) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                disabled: null,
                className: "",
            };
            $scope.watch = {
                loading: (newVal) => {
                    if (newVal !== undefined) {
                        if (newVal === "true") {
                            $scope.state.className += " ant-btn-loading";
                        } else {
                            $scope.state.className =
                                $scope.state.className.replace(
                                    " ant-btn-loading",
                                    ""
                                );
                        }
                    }
                },
            };

            for (const key in $scope.watch) {
                $scope.$watch(key, $scope.watch[key], true);
            }
        },
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            esNgAntd.createStyle("ant-btn", style);
            let className = ["ant-btn"];

            if ($scope.type) {
                className.push("ant-btn-" + $scope.type);
            }

            if ($scope.size && ["lg", "sm", "xs"].includes($scope.size)) {
                className.push("ant-btn-" + $scope.size);
            }

            if ($scope.ghost) {
                className.push("ant-btn-background-ghost");
            }

            $scope.state.className = className.join(" ");

            if ($scope.htmlType) {
                $element[0].setAttribute("type", $scope.htmlType);
            }
        },
    };
});