import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { createContext, useState, useContext, Fragment, useRef, useEffect } from 'react';
import _pt from 'prop-types';

var StickyObserverContext = createContext({
  isStuck: false,
  lipShadowPosition: "bottom",
  setIsIntersecting: function setIsIntersecting() {
    return undefined;
  }
});
// This component is a shorthand; use
//  - StickyObserverProvider,
//  - StickyObservedContainer
//  - StickyObserverSentinel
//  - StickyLipShadow
// if you need more control over DOM structure,
function StickyObserver(_ref) {
  var lipShadowPosition = _ref.lipShadowPosition,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["lipShadowPosition", "children"]);

  return jsx(StickyObserverProvider, {
    lipShadowPosition: lipShadowPosition
  }, jsx(StickyObservedContainer, rest, children));
}
StickyObserver.propTypes = {
  lipShadowPosition: _pt.oneOf(["top", "bottom"]).isRequired
};
function StickyObserverProvider(_ref2) {
  var lipShadowPosition = _ref2.lipShadowPosition,
      children = _ref2.children;

  var _React$useState = useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isIntersecting = _React$useState2[0],
      setIsIntersecting = _React$useState2[1];

  var contextValue = {
    isStuck: isIntersecting,
    setIsIntersecting: setIsIntersecting,
    lipShadowPosition: lipShadowPosition
  };
  return jsx(StickyObserverContext.Provider, {
    value: contextValue
  }, children);
}
StickyObserverProvider.propTypes = {
  lipShadowPosition: _pt.oneOf(["top", "bottom"]).isRequired,
  children: _pt.node.isRequired
};
function useStickyObserver() {
  return useContext(StickyObserverContext);
}
function StickyObservedContainer(_ref3) {
  var children = _ref3.children,
      rest = _objectWithoutProperties(_ref3, ["children"]);

  var _useStickyObserver = useStickyObserver(),
      lipShadowPosition = _useStickyObserver.lipShadowPosition;

  return jsx(Fragment, null, lipShadowPosition === "bottom" && jsx(StickyObserverSentinel, null), jsx(StickyObserverSentinel, null), jsx("div", _extends({
    css: [{
      position: "sticky",
      zIndex: 1,
      left: 0,
      width: "100%"
    }, lipShadowPosition === "top" && {
      bottom: 0
    }, lipShadowPosition === "bottom" && {
      top: 0
    }]
  }, rest), lipShadowPosition === "top" && jsx(StickyLipShadow, null), children, lipShadowPosition === "bottom" && jsx(StickyLipShadow, null)), lipShadowPosition === "top" && jsx(StickyObserverSentinel, null));
}
// A "sentinel" is a hack DIV element that is rendered next to the sticky element:
//  - before the sticky element if it sticks to the top
//  - after the sticky element if it sticks to the bottom
// IntersectionObserver does not work properly for elements with position: sticky,
// and this is why this "sentinel" is needed if we want to use Intersection API to identify
// whether a sticky element has "stuck".
//
// When the sticky element gets "stuck", it pushes the sentinel away from the screen, triggering an intersection entry
// When the sticky element gets "unstuck", the sentinel appears on the screen, triggering an intersection entry
function StickyObserverSentinel(_props) {
  var _useStickyObserver2 = useStickyObserver(),
      setIsIntersecting = _useStickyObserver2.setIsIntersecting,
      lipShadowPosition = _useStickyObserver2.lipShadowPosition;

  var sentinelRef = useRef(null);
  var observerRef = useRef(null);
  useEffect(function () {
    if (!sentinelRef.current) {
      return;
    }

    observerRef.current = new IntersectionObserver(function (entries) {
      if (entries[0].intersectionRatio === 0) {
        setIsIntersecting(true);
      } else if (entries[0].intersectionRatio === 1) {
        setIsIntersecting(false);
      }
    }, {
      threshold: [0, 1]
    });
    observerRef.current.observe(sentinelRef.current);
    return function () {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [lipShadowPosition, sentinelRef.current]);
  return jsx("div", {
    ref: sentinelRef,
    css: {
      height: "1px"
    },
    "aria-hidden": true
  });
}
// Lip shadows MUST be rendered as children of the sticky element for proper positioning
function StickyLipShadow(_props) {
  var _useStickyObserver3 = useStickyObserver(),
      isStuck = _useStickyObserver3.isStuck,
      lipShadowPosition = _useStickyObserver3.lipShadowPosition;

  return jsx("div", {
    "data-sticky-lip-visible": isStuck,
    css: function css(theme) {
      return [{
        height: 0,
        position: "relative",
        ":before": {
          content: '""',
          display: "block",
          position: "absolute",
          left: 0,
          right: 0,
          height: 1,
          transition: "box-lip ".concat(theme.transitions["default"]),
          boxShadow: "none"
        }
      }, lipShadowPosition === "top" && {
        ":before": {
          top: 0
        },
        '&[data-sticky-lip-visible="true"]:before': {
          boxShadow: getLipBoxShadow(theme, "top")
        }
      }, lipShadowPosition === "bottom" && {
        ":before": {
          bottom: 0
        },
        '&[data-sticky-lip-visible="true"]:before': {
          boxShadow: getLipBoxShadow(theme, "bottom")
        }
      }];
    }
  });
}

function getLipBoxShadow(theme, shadowDirection) {
  return "\n        0px ".concat(shadowDirection === "top" ? -2 : 2, "px 2px ").concat(theme.colors.blackFade[20], ",\n        0px ").concat(shadowDirection === "top" ? -4 : 4, "px 4px ").concat(theme.colors.blackFade[40], "\n    ");
}

StickyObserver.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StickyObserver",
  "props": {
    "lipShadowPosition": {
      "required": true,
      "tsType": {
        "name": "union",
        "raw": "`top` | `bottom`",
        "elements": [{
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }]
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StickyObserver/StickyObserver.tsx"] = {
    name: "StickyObserver",
    docgenInfo: StickyObserver.__docgenInfo,
    path: "src/components/StickyObserver/StickyObserver.tsx"
  };
}

StickyObserverProvider.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StickyObserverProvider",
  "props": {
    "lipShadowPosition": {
      "required": true,
      "tsType": {
        "name": "union",
        "raw": "`top` | `bottom`",
        "elements": [{
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }]
      },
      "description": ""
    },
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StickyObserver/StickyObserver.tsx"] = {
    name: "StickyObserverProvider",
    docgenInfo: StickyObserverProvider.__docgenInfo,
    path: "src/components/StickyObserver/StickyObserver.tsx"
  };
}

StickyObservedContainer.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StickyObservedContainer"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StickyObserver/StickyObserver.tsx"] = {
    name: "StickyObservedContainer",
    docgenInfo: StickyObservedContainer.__docgenInfo,
    path: "src/components/StickyObserver/StickyObserver.tsx"
  };
}

StickyObserverSentinel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StickyObserverSentinel"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StickyObserver/StickyObserver.tsx"] = {
    name: "StickyObserverSentinel",
    docgenInfo: StickyObserverSentinel.__docgenInfo,
    path: "src/components/StickyObserver/StickyObserver.tsx"
  };
}

StickyLipShadow.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StickyLipShadow"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StickyObserver/StickyObserver.tsx"] = {
    name: "StickyLipShadow",
    docgenInfo: StickyLipShadow.__docgenInfo,
    path: "src/components/StickyObserver/StickyObserver.tsx"
  };
}

export { StickyLipShadow, StickyObservedContainer, StickyObserver, StickyObserverProvider, StickyObserverSentinel, useStickyObserver };
//# sourceMappingURL=StickyObserver.esm.js.map
