"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockSelector4;
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");
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 BlockSelector4(_ref) {
  let {
    gameRef,
    staticBlock,
    staticBlockItem,
    posterItems
  } = _ref;
  const containerRef = (0, _react.useRef)(null);
  const scrollContainerRef = (0, _react.useRef)(null);
  const staticBlockRef = (0, _react.useRef)(null);
  const scrollTimeoutRef = (0, _react.useRef)(null);
  const itemHeight = 50;

  // start at the middle item
  (0, _react.useEffect)(() => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop = posterItems.length * itemHeight / 2;
    }
  }, [posterItems]);
  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;
    }
  };
  const getSnappedItem = () => {
    if (!staticBlockRef.current || !scrollContainerRef.current) return null;
    const staticRect = staticBlockRef.current.getBoundingClientRect();
    const staticCenterY = staticRect.top + staticRect.height / 2;
    const items = scrollContainerRef.current.querySelectorAll(".".concat(_styleModule.default.carouselItem));
    let closestEl = null;
    let minDist = Infinity;
    items.forEach(el => {
      const r = el.getBoundingClientRect();
      const dist = Math.abs(staticCenterY - (r.top + r.height / 2));
      if (dist < minDist) {
        minDist = dist;
        closestEl = el;
      }
    });
    if (closestEl) {
      const idx = parseInt(closestEl.getAttribute("data-index") || "", 10);
      return posterItems[idx];
    }
    return null;
  };
  const handleScroll = () => {
    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }
    scrollTimeoutRef.current = setTimeout(() => {
      const snapped = getSnappedItem();
      if (snapped) onBlockChange(snapped);
    }, 150);
  };
  const scrollByItem = dir => {
    const el = scrollContainerRef.current;
    if (!el) return;
    const delta = dir === "up" ? -itemHeight : itemHeight;
    // scrollBy with smooth behavior
    el.scrollBy({
      top: delta,
      behavior: "smooth"
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _styleModule.default.outerContainer,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      onClick: () => scrollByItem("down"),
      className: _styleModule.default.upArrowContainer,
      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,
        style: {
          overflowY: "auto",
          paddingTop: itemHeight * 2 - 2,
          paddingBottom: itemHeight * 2 - 2
        },
        children: posterItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          "data-index": index,
          className: _styleModule.default.carouselItem,
          style: {
            height: itemHeight
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {
            className: _styleModule.default.carouselItemIcon
          })
        }, index + item.block))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      onClick: () => scrollByItem("up"),
      className: _styleModule.default.downArrowContainer,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdKeyboardArrowDown, {
        color: _colors.MAIN_BLUE,
        size: 40
      })
    })]
  });
}