import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useRef, useState, useEffect } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import contrast from "../../utils/contrast";
import useScrollBlock from "../../hooks/useScrollBlock";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const HorizontalList = props => {
  const theme = useTheme();
  const {
    width = "100%",
    deltaMultiplier = 0.5,
    arrowTriggerRange = 20,
    showArrows = true,
    style,
    color = "background",
    textColor = null,
    arrowScrollDistance = 200,
    children,
    className,
    internalProps = {},
    ...otherProps
  } = props;
  const scrollEl = useRef(null);
  const scrollInEl = useRef(null);
  const [prevScrollPos, setPrevScrollPos] = useState(0);
  const [isStart, setIsStart] = useState(true);
  const [isEnd, setIsEnd] = useState(true);
  const [, setLocked] = useScrollBlock();
  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 isThemePalette(color) ? theme.palette[color][500] : color;
    }
  }

  function handleTextColor() {
    if (!textColor) return contrast(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 isThemePalette(textColor) ? theme.palette[textColor][500] : textColor;
    }
  }

  return /*#__PURE__*/_jsxs("div", {
    style: {
      position: "relative",
      width,
      ...style
    },
    ...otherProps,
    className: _JSXStyle.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || ""),
    children: [showArrows && !isStart && /*#__PURE__*/_jsx("div", {
      onClick: () => {
        scrollPage(-arrowScrollDistance);
      },
      className: _JSXStyle.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (classnames("Wps-HorizontalListStartIcon") || ""),
      children: "\u276E"
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "Wps-HorizontalList",
      ref: scrollEl,
      onScroll: handleScroll,
      onWheel: handleScroll,
      onMouseEnter: () => setLocked(true),
      onMouseLeave: () => setLocked(false),
      className: _JSXStyle.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (classnames("Wps-HorizontalListWrapper") || ""),
      children: /*#__PURE__*/_jsx("div", {
        ref: scrollInEl,
        ...internalProps,
        className: _JSXStyle.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (internalProps && internalProps.className != null && internalProps.className || classnames("Wps-HorizontalList", className) || ""),
        children: children
      })
    }), showArrows && !isEnd && /*#__PURE__*/_jsx("div", {
      onClick: () => {
        scrollPage(arrowScrollDistance);
      },
      className: _JSXStyle.dynamic([["1084437453", [handleTextColor(), handleBackgroundColor(), handleBackgroundColor(), handleTextColor(), handleBackgroundColor(), handleBackgroundColor()]]]) + " " + (classnames("Wps-HorizontalListEndIcon", className) || ""),
      children: "\u276F"
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      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;}`
    })]
  });
};