"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.HorizontalList = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _contrast = _interopRequireDefault(require("../../utils/contrast"));

var _useScrollBlock = _interopRequireDefault(require("../../hooks/useScrollBlock"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Generated with util/create-component.js
const HorizontalList = props => {
  const theme = (0, _useTheme.default)();
  const {
    width = "100%",
    deltaMultiplier = 0.5,
    arrowTriggerRange = 20,
    showArrows = true,
    style,
    color = "background",
    textColor = null,
    arrowScrollDistance = 200,
    children,
    className,
    internalProps = {},
    ...otherProps
  } = props;
  const scrollEl = (0, _react.useRef)(null);
  const scrollInEl = (0, _react.useRef)(null);
  const [prevScrollPos, setPrevScrollPos] = (0, _react.useState)(0);
  const [isStart, setIsStart] = (0, _react.useState)(true);
  const [isEnd, setIsEnd] = (0, _react.useState)(true);
  const [, setLocked] = (0, _useScrollBlock.default)();
  (0, _react.useEffect)(() => {
    handleScroll({
      deltaY: 1,
      deltaX: 1
    });
  }, []); // scroll event

  const handleScroll = event => {
    if (!(scrollEl != null && scrollEl.current)) return; // error if element not defined

    let scrollLeftMax = scrollEl.current.scrollWidth - scrollEl.current.clientWidth;
    let scaleNew = prevScrollPos + (event.deltaY + event.deltaX) * deltaMultiplier; // inside scroll range

    if (scaleNew > 0 && scaleNew < scrollLeftMax + arrowTriggerRange) {
      setPrevScrollPos(scaleNew);
    }

    prevScrollPos >= scrollLeftMax - arrowTriggerRange ? setIsEnd(true) : setIsEnd(false);
    prevScrollPos <= 0 + arrowTriggerRange ? setIsStart(true) : setIsStart(false);
    scrollEl.current.scrollLeft = prevScrollPos;
  };

  function scrollPage(scrollDistance) {
    let scrollLeftMax = scrollEl.current.scrollWidth - scrollEl.current.clientWidth;
    let scaleNew = Math.min(Math.max(0, prevScrollPos + scrollDistance), scrollLeftMax);
    setPrevScrollPos(scaleNew);
    scrollEl.current.scrollLeft = scaleNew;
  }

  function handleBackgroundColor() {
    switch (color) {
      case "text":
        return theme.palette.text;

      case "subtext":
        return theme.palette.subtext;

      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return (0, _isThemePalette.default)(color) ? theme.palette[color][500] : color;
    }
  }

  function handleTextColor() {
    if (!textColor) return (0, _contrast.default)(handleBackgroundColor());

    switch (textColor) {
      case "text":
        return theme.palette.text;

      case "subtext":
        return theme.palette.subtext;

      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return (0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor;
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      position: "relative",
      width,
      ...style
    },
    ...otherProps,
    className: _style.default.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || ""),
    children: [showArrows && !isStart && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      onClick: () => {
        scrollPage(-arrowScrollDistance);
      },
      className: _style.default.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + ((0, _classnames.default)("Wps-HorizontalListStartIcon") || ""),
      children: "\u276E"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "data-testid": "Wps-HorizontalList",
      ref: scrollEl,
      onScroll: handleScroll,
      onWheel: handleScroll,
      onMouseEnter: () => setLocked(true),
      onMouseLeave: () => setLocked(false),
      className: _style.default.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + ((0, _classnames.default)("Wps-HorizontalListWrapper") || ""),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: scrollInEl,
        ...internalProps,
        className: _style.default.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (internalProps && internalProps.className != null && internalProps.className || (0, _classnames.default)("Wps-HorizontalList", className) || ""),
        children: children
      })
    }), showArrows && !isEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      onClick: () => {
        scrollPage(arrowScrollDistance);
      },
      className: _style.default.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + ((0, _classnames.default)("Wps-HorizontalListEndIcon", className) || ""),
      children: "\u276F"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1084437453",
      dynamic: [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()],
      children: `.Wps-HorizontalListWrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;overflow:hidden;position:relative;background-color:transparent;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.Wps-HorizontalListWrapper.__jsx-style-dynamic-selector::-webkit-scrollbar{display:none;}.Wps-HorizontalList.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;}.Wps-HorizontalListStartIcon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${handleTextColor()};background:transparent;border:none;cursor:pointer;background-image:linear-gradient( -90deg, transparent, ${handleBackgroundColor()}, ${handleBackgroundColor()} );content:"❮";position:absolute;left:0;top:0;height:100%;padding:0px 20px;z-index:1;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.Wps-HorizontalListEndIcon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${handleTextColor()};background:transparent;border:none;cursor:pointer;background-image:linear-gradient( 90deg, transparent, ${handleBackgroundColor()}, ${handleBackgroundColor()} );content:"❯";position:absolute;right:0;top:0;height:100%;padding:0px 20px;z-index:1;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}`
    })]
  });
};

exports.HorizontalList = HorizontalList;