import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { cx } from "../../../lib/theming/Emotion";
import { PopupHelper } from "../PopupHelper";
import { styles } from "../PopupPinNew.styles";
import { PopupDataTids } from "../Popup";
export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
  function PopupPinNew() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.getPinInlineStyle = function (left, top) {
      var _ref, _ref2;
      var direction = _this.getPopupOppositeDirection();
      if (!direction) {
        return;
      }

      // Добавляем запас в 1px, чтобы пофиксить случайные отделения пинов
      var correctedLeft = left - 1;
      var correctedTop = top - 1;
      var correctedSize = _this.props.size + 1;
      switch (direction) {
        case 'top':
        case 'bottom':
          return _ref = {}, _ref[direction] = -_this.props.size + 'px', _ref.left = correctedLeft + 'px', _ref.width = correctedSize * 2 + 'px', _ref.height = correctedSize + 'px', _ref.backgroundColor = _this.props.backgroundColor, _ref;
        case 'left':
        case 'right':
          return _ref2 = {}, _ref2[direction] = -_this.props.size + 'px', _ref2.top = correctedTop + 'px', _ref2.height = correctedSize * 2 + 'px', _ref2.width = correctedSize + 'px', _ref2.backgroundColor = _this.props.backgroundColor, _ref2;
        default:
          console.error("Can't get inline style: invalid direction '" + direction + "'. Returning default");
      }
    };
    _this.getPinCoordinates = function (popupElement) {
      var popupRect = PopupHelper.getElementAbsoluteRect(popupElement);
      var _this$positionObject = _this.positionObject,
        direction = _this$positionObject.direction,
        align = _this$positionObject.align;
      switch (direction) {
        case 'top':
          return {
            top: popupRect.height,
            left: _this.getPinLeftCoordinate(popupRect, align)
          };
        case 'bottom':
          return {
            top: -2 * _this.props.size,
            left: _this.getPinLeftCoordinate(popupRect, align)
          };
        case 'left':
          return {
            top: _this.getPinTopCoordinate(popupRect, align),
            left: popupRect.width
          };
        case 'right':
          return {
            top: _this.getPinTopCoordinate(popupRect, align),
            left: -2 * _this.props.size
          };
        default:
          console.error("Can't get coordinate: invalid direction '" + direction + "'.");
      }
    };
    _this.getPinTopCoordinate = function (popupRect, align) {
      switch (align) {
        case 'top':
          return _this.props.offset;
        case 'middle':
          return popupRect.height / 2 - _this.props.size;
        case 'bottom':
          return popupRect.height - _this.props.offset - 2 * _this.props.size;
        default:
          console.error("Can't get coordinate: invalid align '" + align + "'.");
      }
    };
    _this.getPinLeftCoordinate = function (popupRect, align) {
      switch (align) {
        case 'left':
          return _this.props.offset;
        case 'center':
          return popupRect.width / 2 - _this.props.size;
        case 'right':
          return popupRect.width - _this.props.offset - 2 * _this.props.size;
        default:
          console.error("Can't get coordinate: invalid align '" + align + "'.");
      }
    };
    _this.getPinDirectionalStyle = function () {
      switch (_this.positionObject.direction) {
        case 'top':
          return styles.pinTop();
        case 'bottom':
          return styles.pinBottom();
        case 'left':
          return styles.pinLeft();
        case 'right':
          return styles.pinRight();
        default:
          console.error("Can't get directional style: invalid direction '" + _this.positionObject.direction + "'.");
      }
    };
    return _this;
  }
  _inheritsLoose(PopupPinNew, _React$Component);
  var _proto = PopupPinNew.prototype;
  _proto.render = function render() {
    if (!this.props.popupElement) {
      return null;
    }
    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);
    var coords = this.getPinCoordinates(this.props.popupElement);
    if (!coords || !coords.left || !coords.top) {
      return null;
    }
    var inlineStyle = this.getPinInlineStyle(coords.left, coords.top);
    var directionalStyle = this.getPinDirectionalStyle();
    if (!inlineStyle || !directionalStyle) {
      return null;
    }
    return /*#__PURE__*/React.createElement("div", {
      "data-tid": PopupDataTids.popupPin,
      className: cx(styles.pin(), directionalStyle),
      style: inlineStyle
    });
  };
  _proto.getPopupOppositeDirection = function getPopupOppositeDirection() {
    var popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;
    switch (popupDirection) {
      case 'top':
        return 'bottom';
      case 'bottom':
        return 'top';
      case 'left':
        return 'right';
      case 'right':
        return 'left';
      default:
        console.error("Can't get opposite direction: invalid direction '" + popupDirection + "'");
    }
  };
  return PopupPinNew;
}(React.Component);
PopupPinNew.__KONTUR_REACT_UI__ = 'PopupPin';
PopupPinNew.displayName = 'PopupPin';