function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import { TouchableOpacity, Modal, I18nManager } from 'react-native';
import Triangle from './Triangle';
import { ScreenWidth, ScreenHeight, isIOS } from './helpers';
import getTooltipCoordinate from './getTooltipCoordinate';
import { View } from '../../primitives';

class Tooltip extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      isVisible: false,
      yOffset: 0,
      xOffset: 0,
      elementWidth: 0,
      elementHeight: 0
    });

    _defineProperty(this, "renderedElement", void 0);

    _defineProperty(this, "timeout", void 0);

    _defineProperty(this, "toggleTooltip", () => {
      const {
        onClose
      } = this.props;
      this.getElementPosition();
      this.setState(prevState => {
        if (prevState.isVisible && !isIOS) {
          onClose && onClose();
        }

        return {
          isVisible: !prevState.isVisible
        };
      });
    });

    _defineProperty(this, "wrapWithAction", (actionType, children) => {
      switch (actionType) {
        case 'press':
          return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
            onPress: this.toggleTooltip,
            activeOpacity: 1
          }, this.props.toggleWrapperProps), children);

        case 'longPress':
          return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
            onLongPress: this.toggleTooltip,
            activeOpacity: 1
          }, this.props.toggleWrapperProps), children);

        default:
          return children;
      }
    });

    _defineProperty(this, "getTooltipStyle", () => {
      const {
        yOffset,
        xOffset,
        elementHeight,
        elementWidth
      } = this.state;
      const {
        height,
        width,
        withPointer,
        containerStyle
      } = this.props;
      const {
        x,
        y
      } = getTooltipCoordinate(xOffset, yOffset, elementWidth, elementHeight, ScreenWidth, ScreenHeight, width, height, withPointer);
      return {
        position: 'absolute',
        left: I18nManager.isRTL ? null : x,
        right: I18nManager.isRTL ? x : null,
        top: y,
        width,
        height,
        // default styles
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        borderRadius: 10,
        paddingTop: 10,
        paddingBottom: 10,
        // borderWidth: 1,
        // borderColor: '#CBD5E0',
        ...containerStyle
      };
    });

    _defineProperty(this, "renderPointer", tooltipY => {
      const {
        yOffset,
        xOffset,
        elementHeight,
        elementWidth
      } = this.state;
      const {
        backgroundColor,
        pointerStyle
      } = this.props;
      const pastMiddleLine = yOffset > tooltipY;
      const styling = {
        position: 'absolute',
        top: pastMiddleLine ? yOffset - 13 : yOffset + elementHeight - 2,
        left: I18nManager.isRTL ? null : xOffset + elementWidth / 2 - 7.5,
        right: I18nManager.isRTL ? xOffset + elementWidth / 2 - 7.5 : null
      };
      return /*#__PURE__*/React.createElement(View, {
        style: styling
      }, /*#__PURE__*/React.createElement(Triangle, {
        borderBottomColor: backgroundColor,
        style: { ...pointerStyle
        },
        isDown: pastMiddleLine
      }));
    });

    _defineProperty(this, "renderContent", withTooltip => {
      const {
        popover,
        withPointer,
        highlightColor,
        actionType
      } = this.props;
      if (!withTooltip) return this.wrapWithAction(actionType, this.props.children);
      const {
        yOffset,
        xOffset,
        elementWidth,
        elementHeight
      } = this.state;
      const tooltipStyle = this.getTooltipStyle();
      const styling = {
        position: 'absolute',
        top: yOffset,
        left: I18nManager.isRTL ? null : xOffset,
        right: I18nManager.isRTL ? xOffset : null,
        backgroundColor: highlightColor,
        overflow: 'visible',
        width: elementWidth,
        height: elementHeight
      };
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
        style: styling
      }, this.props.children), withPointer && this.renderPointer(tooltipStyle.top), /*#__PURE__*/React.createElement(View, {
        bg: this.props.backgroundColor,
        borderColor: this.props.borderColor,
        borderWidth: this.props.borderWidth,
        style: tooltipStyle
      }, popover));
    });

    _defineProperty(this, "getElementPosition", () => {
      this.renderedElement && this.renderedElement.measureInWindow((pageOffsetX, pageOffsetY, width, height) => {
        this.setState({
          xOffset: pageOffsetX,
          yOffset: pageOffsetY,
          elementWidth: width,
          elementHeight: height
        });
      });
    });
  }

  componentDidMount() {
    // wait to compute onLayout values.
    this.timeout = setTimeout(this.getElementPosition, 500);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }

  render() {
    const {
      isVisible
    } = this.state;
    const {
      onClose,
      withOverlay,
      onOpen,
      overlayColor
    } = this.props;
    return /*#__PURE__*/React.createElement(View, {
      collapsable: false,
      ref: e => this.renderedElement = e
    }, this.renderContent(false), /*#__PURE__*/React.createElement(Modal, {
      animationType: "fade",
      visible: isVisible,
      transparent: true,
      onDismiss: onClose,
      onShow: onOpen,
      onRequestClose: onClose
    }, this.props.closeOnBlur ? /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: {
        position: 'absolute',
        left: 0,
        top: 0,
        opacity: 0.5,
        right: 0,
        bottom: 0
      },
      onPress: this.toggleTooltip
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), this.props.closeOnPopoverPress ? /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.container(withOverlay, overlayColor),
      onPress: this.toggleTooltip,
      activeOpacity: 1
    }, /*#__PURE__*/React.createElement(View, null, this.renderContent(true))) : this.renderContent(true)));
  }

}

_defineProperty(Tooltip, "defaultProps", void 0);

Tooltip.defaultProps = {
  toggleWrapperProps: {},
  withOverlay: true,
  highlightColor: 'transparent',
  withPointer: true,
  actionType: 'press',
  height: 40,
  width: 150,
  containerStyle: {},
  pointerStyle: {},
  backgroundColor: '#617080',
  onClose: () => {},
  onOpen: () => {}
};
const styles = {
  container: (withOverlay, overlayColor) => ({
    backgroundColor: withOverlay ? overlayColor ? overlayColor : 'rgba(250, 250, 250, 0.70)' : 'transparent',
    flex: 1,
    zIndex: -1
  })
};
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map