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

  import template from "./Button.html";
  angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAntd) {
    return {
      template: template,
      restrict: "E",
      replace: true,
      transclude: true,
      scope: {
        type: "@",
        size: "@",
        htmlType: "@",
        ghost: "=",
        loading: "@"
      },
      controller: function ($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", "");

              }

            }
          }
        };
      },
      link: function ($scope, $element, $attrs, $controllers, $transclude) {
        esNgAntd.createStyle("ant-btn", style);
          let className = ["ant-btn"];
          
          console.log($scope);

        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);
        }
      }
    };
  }]);