"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockSelector3;
require("core-js/modules/es.parse-int.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.for-each.js");
require("core-js/modules/esnext.iterator.map.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _styleModule = _interopRequireDefault(require("./style.module.css"));
var _md = require("react-icons/md");
var _colors = require("../styles/colors");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function BlockSelector3(_ref) {
  let {
    gameRef,
    staticBlock,
    staticBlockItem,
    posterItems
  } = _ref;
  const containerRef = (0, _react.useRef)(null);
  const scrollContainerRef = (0, _react.useRef)(null);
  const [extendedItems, setExtendedItems] = (0, _react.useState)([...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems, ...posterItems]);
  const itemHeight = 50; // We might want to compute this dynamically.
  const staticBlockRef = (0, _react.useRef)(null);
  let scrollTimeout = null;

  // On mount, set the initial scroll to the middle copy.
  (0, _react.useEffect)(() => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop = posterItems.length * itemHeight;
    }
  }, [posterItems, itemHeight]);
  const onBlockChange = item => {
    if (!gameRef.current || !gameRef.current.scene) return;
    switch (staticBlock) {
      case "left":
        gameRef.current.scene.selectedCogTiltLeftBlock = item;
        break;
      case "right":
        gameRef.current.scene.selectedCogTiltRightBlock = item;
        break;
    }
    ;
  };

  // Use the DOM to determine which poster item is centered under the static block.
  const getSnappedItem = () => {
    if (!staticBlockRef.current || !scrollContainerRef.current) return null;
    // Get the static block's bounding rectangle.
    const staticRect = staticBlockRef.current.getBoundingClientRect();
    const staticCenterY = staticRect.top + staticRect.height / 2;

    // Query all poster items.
    const items = scrollContainerRef.current.querySelectorAll(".".concat(_styleModule.default.carouselItem));
    let closestItem = null;
    let minDistance = Infinity;
    items.forEach(el => {
      const rect = el.getBoundingClientRect();
      const itemCenterY = rect.top + rect.height / 2;
      const distance = Math.abs(staticCenterY - itemCenterY);
      if (distance < minDistance) {
        minDistance = distance;
        closestItem = el;
      }
    });
    if (closestItem) {
      // Get the index from the data attribute.
      const indexStr = closestItem.getAttribute("data-index");
      if (indexStr !== null) {
        const extendedIndex = parseInt(indexStr, 10);
        return extendedItems[extendedIndex];
      }
    }
    return null;
  };

  // Handle scroll event to simulate infinite scrolling.
  const handleScroll = () => {
    // append or prepend items in the extendedItems array based on scroll position
    const scrollEl = scrollContainerRef.current;
    if (!scrollEl) return;
    const scrollTop = scrollEl.scrollTop;
    const scrollHeight = scrollEl.scrollHeight;
    const clientHeight = scrollEl.clientHeight;
    const scrollBottom = scrollTop + clientHeight;
    const scrollThreshold = itemHeight * 2;
    if (scrollTop < scrollThreshold) {
      const newItems = extendedItems.slice(-posterItems.length);
      setExtendedItems(prev => [...newItems, ...prev]);
      scrollEl.scrollTop += itemHeight * posterItems.length;
    } else if (scrollBottom > scrollHeight - scrollThreshold) {
      const newItems = extendedItems.slice(0, posterItems.length);
      setExtendedItems(prev => [...prev, ...newItems]);
      scrollEl.scrollTop -= itemHeight * posterItems.length;
    }
    // Determine the snapped item.
    if (scrollTimeout) {
      clearTimeout(scrollTimeout);
    }
    scrollTimeout = setTimeout(() => {
      const snappedItem = getSnappedItem();
      if (snappedItem) {
        onBlockChange(snappedItem);
      }
    }, 200);
  };
  const scrollByItem = direction => {
    const scrollEl = scrollContainerRef.current;
    if (!scrollEl) return;
    const delta = direction === "up" ? -itemHeight : itemHeight;
    scrollEl.scrollBy({
      top: delta,
      behavior: "smooth"
    });
  };
  const handleArrowUpClick = () => {
    scrollByItem("up");
  };
  const handleArrowDownClick = () => {
    scrollByItem("down");
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _styleModule.default.outerContainer,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _styleModule.default.upArrowContainer,
      onClick: handleArrowUpClick,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdKeyboardArrowUp, {
        color: _colors.MAIN_BLUE,
        size: 40
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      ref: containerRef,
      className: _styleModule.default.carouselBody,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: staticBlockRef,
        className: _styleModule.default.staticBlockItem,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(staticBlockItem.icon, {
          className: _styleModule.default.staticBlockItemIcon
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: scrollContainerRef,
        className: _styleModule.default.scrollContainer,
        onScroll: handleScroll,
        children: extendedItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          "data-index": index // Tag each item with its index.
          ,
          className: _styleModule.default.carouselItem,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {
            className: _styleModule.default.carouselItemIcon
          })
        }, index + item.block))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _styleModule.default.downArrowContainer,
      onClick: handleArrowDownClick,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdKeyboardArrowDown, {
        color: _colors.MAIN_BLUE,
        size: 40
      })
    })]
  });
}