import template from "./Popover.html";

  import style from "antd/lib/popover/style/index.css";
  angular
      .module("esNgAntd")

      .directive("esPopover", function ($compile, $timeout, esNgAntd) {

          return {
              controllerAs: "esPopover",
              restrict: "E",
              transclude: true,
              replace: true,
              scope: {
                  title: "@",
                  content: "@",
                  context: "=",
                  placement: "@",
                  getPopupContainer: "&",

                  trigger: "@",

              },
              template: template,
              controller: function ($scope, $element, $attrs) {
                  this.getContext = function () {
                      return $scope;
                  };
  
                  $scope.state = {
                      visible: false,
                      content: $scope.content ? $scope.content : "",
                      clickTarget: null,

                      trigger: $scope.trigger || "hover",
                      closing: false,

                  };
  
                  $scope.myEvent = function () {

                      setTimeout(() => {
                          $scope.state.visible = false;
                          $scope.$apply();
                          document.body.removeEventListener(
                              "click",
                              $scope.myEvent
                          );
                      }, 0);

                  };
  
                  $scope.handleClick = function () {

                      if ($scope.state.trigger !== "click") {
                          return;
                      }
  

                      if ($scope.state.visible === false) {
                          // 气泡层（显示）
                          $scope.state.visible = true; // 处理位置
  
                          $scope.handlePosition(); // 事件绑定
  
                          document.body.addEventListener("click", $scope.myEvent);
                      } else {
                          setTimeout(() => {
                              $scope.state.visible = false;
                              $scope.$apply();
                              document.body.removeEventListener(
                                  "click",
                                  $scope.myEvent
                              );
                          }, 0);
                      }
                  };

                  $scope.showPopover = function () {
                      // 气泡层（显示）
                      $scope.state.visible = true; // 调整位置
  
                      $scope.handlePosition();
                  };
  
                  $scope.hidePopover = function () {
                      $scope.state.closing = true;
                      $timeout(function () {
                          if ($scope.state.closing === false) {
                              return;
                          }
  
                          $scope.state.visible = false;
                      }, 100);
                  };
  
                  $scope.onMouseEnter = function () {
                      if ($scope.state.trigger !== "hover") {
                          return;
                      }
  
                      if ($scope.state.closing === true) {
                          $scope.state.closing = false;
                      }
  
                      $scope.showPopover();
                  };
  
                  $scope.onMouseLeave = function () {
                      if ($scope.state.trigger !== "hover") {
                          return;
                      }
  
                      $scope.hidePopover();
                  };
  

                  $scope.handlePosition = function () {
                      setTimeout(function () {
                          let popover =
                              $scope.state.popover.querySelector(".ant-popover");

                          if ($scope.placement === "top") {
                              popover.style["top"] = $scope.getTop();
                          } else if ($scope.placement === "bottom") {
                              popover.style["top"] = $scope.getTop();
                          }

                          popover.style.left = $scope.getLeft() + "px";
                      }, 0);
                  };

                  $scope.getLeft = function () {
                      let parent = $scope.getPopupContainer();
                      let popover =
                          $scope.state.popover.querySelector(".ant-popover");
                      let target = $scope.state.target;

                      if (parent) {
                          return -(
                              popover.clientWidth / 2 -
                              target.clientWidth / 2

                          );

                      } else {
                          let offset = esNgAntd.getOffset(target);

                          return (

                              offset.left -
                              (popover.clientWidth / 2 - target.clientWidth / 2)

                          );
                      }

                  };
  
                  $scope.getTop = function () {
                      let parent = $scope.getPopupContainer();
                      let popover =
                          $scope.state.popover.querySelector(".ant-popover");
                      let target = $scope.state.target;
  
                      if (parent) {
                          if ($scope.placement === "top") {
                              return -popover.clientHeight + "px";
                          } else if ($scope.placement === "bottom") {
                          }
                      } else {
                          let offset = esNgAntd.getOffset(target);
  
                          if ($scope.placement === "top") {
                              return offset.top - popover.clientHeight - 4 + "px";
                          } else if ($scope.placement === "bottom") {
                              return offset.top + target.clientHeight + 4 + "px";
                          }
                      }
                  };
              },
              link: function (
                  $scope,
                  $element,
                  $attrs,
                  $controllers,
                  $transclude
              ) {
                  esNgAntd.createStyle("ant-popover", style);
                  $scope.state.target = $element[0];
                  let title = $scope.title
                      ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`
                      : "";
                  let content = `<div>

              <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')" ng-mouseleave="onMouseLeave()" ng-mouseenter="onMouseEnter()">

                  <div class="ant-popover-content">

                      <div class="ant-popover-arrow">
                          <span class="ant-popover-arrow-content"></span>
                      </div>

                      <div class="ant-popover-inner">
                          <div>
                              ${title}

                              <div class="ant-popover-inner-content"></div>

                          </div>
                      </div>
                  </div>
              </div>
          </div>`;

                  let div = document.createElement("div");
  
                  if (typeof $scope.getPopupContainer() === "function") {
                      $scope.state.popupContainer = $scope.getPopupContainer()();
                  }
  
                  if (!$scope.state.popupContainer) {
                      div.style.position = "absolute";
                      div.style.top = "0px";
                      div.style.left = "0px";
                      div.style.width = "100%";
                      div.innerHTML = content;
                      document.body.appendChild(div);
                  } else {
                      $scope.state.popupContainer.appendChild(div);
                  }
  
                  div.addEventListener("click", function (event) {
                      event.stopPropagation();
                  });
                  $scope.state.target.addEventListener("click", (e) => {
                      e.stopPropagation();
                  });
                  $compile(div)($scope);
                  div.querySelector(".ant-popover-inner-content").innerHTML =
                      $scope.state.content;
                  $compile(div.querySelector(".ant-popover-inner-content"))(
                      $scope.$parent
                  );
                  $scope.state.popover = div;
              },
          };
      });