import React, { useCallback, useContext, useRef, useState, useEffect } from 'react';
import { Modal, View, useWindowDimensions } from 'react-native';
import { Defs, Mask, Rect, Svg } from 'react-native-svg';
import { tourMargin } from '../../constants';
import { TourContext } from '../../contexts/tour/tour-context';
import { testIdWithKey } from '../../utils/testable';
import { SpotCutout } from './SpotCutout';
export const TourOverlay = props => {
  const {
    width: windowWidth,
    height: windowHeight
  } = useWindowDimensions();
  const {
    color,
    currentTour,
    currentStep,
    onBackdropPress,
    backdropOpacity,
    changeSpot,
    spot,
    tourStep
  } = props;
  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`);
  const {
    next,
    previous,
    start,
    stop
  } = useContext(TourContext);
  const [tooltipStyle, setTooltipStyle] = useState({});
  const tooltipRef = useRef(null);
  const handleBackdropPress = useCallback(() => {
    const handler = tourStep.onBackdropPress ?? onBackdropPress;
    if (handler !== undefined && currentStep !== undefined) {
      switch (handler) {
        case 'continue':
          return next();
        case 'stop':
          return stop();
        default:
          return handler({
            currentTour,
            currentStep,
            changeSpot,
            next,
            previous,
            start,
            stop
          });
      }
    }
  }, [tourStep, onBackdropPress, currentTour, currentStep, changeSpot, next, previous, start, stop]);
  useEffect(() => {
    const gapBetweenSpotAndTooltip = 50;
    // if origin spot (ie. no spotlight)
    if (spot.x === 0 && spot.y === 0) {
      // a relative margin so that the tooltip doesn't start at the very top of the screen
      const oneSixthOfScreenHeight = windowHeight / 6;
      setTooltipStyle({
        left: tourMargin,
        right: tourMargin,
        top: oneSixthOfScreenHeight
      });
      // if spot is in the lower half of the screen
    } else if (spot.y >= windowHeight / 2) {
      const bottom = windowHeight - spot.y + gapBetweenSpotAndTooltip;
      setTooltipStyle({
        left: tourMargin,
        right: tourMargin,
        bottom
      });
      // if spot is in the upper half of the screen
    } else {
      const top = spot.y + gapBetweenSpotAndTooltip + spot.height;
      setTooltipStyle({
        left: tourMargin,
        right: tourMargin,
        top
      });
    }
  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y]);
  useEffect(() => {
    // + 1 pixel to account for an svg size rounding issue that would cause
    // a tiny gap around the overlay
    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`);
  }, [windowWidth, windowHeight]);
  return /*#__PURE__*/React.createElement(Modal, {
    animationType: "fade",
    presentationStyle: "overFullScreen",
    transparent: true,
    visible: currentStep !== undefined
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      height: windowHeight + 1,
      width: windowWidth + 1
    },
    testID: testIdWithKey('SpotlightOverlay')
  }, /*#__PURE__*/React.createElement(Svg, {
    testID: testIdWithKey('SpotOverlay'),
    height: windowHeight + 1,
    width: windowWidth + 1,
    viewBox: viewBox,
    onPress: handleBackdropPress,
    shouldRasterizeIOS: true,
    renderToHardwareTextureAndroid: true
  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Mask, {
    id: "mask",
    x: 0,
    y: 0,
    height: windowHeight + 1,
    width: windowWidth + 1
  }, /*#__PURE__*/React.createElement(Rect, {
    height: windowHeight + 1,
    width: windowWidth + 1,
    fill: "#fff"
  }), /*#__PURE__*/React.createElement(SpotCutout, null))), /*#__PURE__*/React.createElement(Rect, {
    height: windowHeight + 1,
    width: windowWidth + 1,
    fill: color,
    mask: "url(#mask)",
    opacity: backdropOpacity
  })), /*#__PURE__*/React.createElement(View, {
    ref: tooltipRef,
    testID: testIdWithKey('SpotTooltip'),
    style: {
      ...tooltipStyle,
      opacity: 1,
      position: 'absolute'
    }
  }, currentStep !== undefined && /*#__PURE__*/React.createElement(tourStep.render, {
    currentTour: currentTour,
    currentStep: currentStep,
    changeSpot: changeSpot,
    next: next,
    previous: previous,
    stop: stop
  }))));
};
//# sourceMappingURL=TourOverlay.js.map