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, $element) {
      $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) {
      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);
      }
    }
  };
}]);