import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useState, useCallback } from "react";
import classnames from "classnames";
import { StyledScrollShadow, StyledScrollShadowBottom, StyledScrollShadowLeft, StyledScrollShadowRight, StyledScrollShadowTop } from "./Styles";
export const ScrollShadow = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    className,
    disableVertical = false,
    disableHorizontal = false,
    invertHorizontal = false,
    invertVertical = false,
    innerColor,
    outerColor,
    ...rest
  } = _ref;
  const [opacity, setOpacity] = useState({
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  });
  const handleScroll = useCallback(event => {
    const {
      scrollHeight,
      clientHeight,
      scrollWidth,
      clientWidth
    } = event.target;
    let {
      scrollTop,
      scrollLeft
    } = event.target;
    if (scrollLeft < 0) {
      scrollLeft *= -1;
    }
    if (scrollTop < 0) {
      scrollTop *= -1;
    }
    setOpacity(prevState => {
      const top = 1 / 20 * Math.min(scrollTop, 20);
      const bottomScrollTop = scrollHeight - clientHeight;
      const bottom = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
      const left = 1 / 20 * Math.min(scrollLeft, 20);
      const offset = scrollWidth - clientWidth;
      const right = 1 / 20 * (offset - Math.max(scrollLeft, offset - 20));
      const newState = {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      };
      if (!disableVertical) {
        newState.top = invertVertical ? bottom : top;
        newState.bottom = invertVertical ? top : bottom;
      }
      if (!disableHorizontal) {
        newState.left = invertHorizontal ? right : left;
        newState.right = invertHorizontal ? left : right;
      }
      if (newState.top !== prevState.top || newState.bottom !== prevState.bottom || newState.left !== prevState.left || newState.right !== prevState.right) {
        return newState;
      }
      return prevState;
    });
  }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
  return /*#__PURE__*/React.createElement(StyledScrollShadow, _extends({}, rest, {
    ref: ref,
    className: classnames("c-scroll-shadow", className)
  }), children({
    onScroll: handleScroll
  }), !disableVertical ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowTop, {
    $innerColor: innerColor,
    $outerColor: outerColor,
    style: {
      opacity: opacity.top
    }
  }), /*#__PURE__*/React.createElement(StyledScrollShadowBottom, {
    $innerColor: innerColor,
    $outerColor: outerColor,
    style: {
      opacity: opacity.bottom
    }
  })) : null, !disableHorizontal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowLeft, {
    $innerColor: innerColor,
    $outerColor: outerColor,
    style: {
      opacity: opacity.left
    }
  }), /*#__PURE__*/React.createElement(StyledScrollShadowRight, {
    $innerColor: innerColor,
    $outerColor: outerColor,
    style: {
      opacity: opacity.right
    }
  })) : null);
});
ScrollShadow.displayName = "ScrollShadow";
//# sourceMappingURL=ScrollShadow.js.map