"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockSelector2;
require("core-js/modules/es.array.reduce.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.map.js");
require("core-js/modules/esnext.iterator.reduce.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 }; }
// import Draggable from "react-draggable";

function BlockSelector2(_ref) {
  let {
    gameRef,
    staticBlock,
    staticBlockItem,
    posterItems,
    snapPointFactors
  } = _ref;
  const containerRef = (0, _react.useRef)(null);
  const [containerHeight, setContainerHeight] = (0, _react.useState)(0);
  const [position, setPosition] = (0, _react.useState)();
  const snapPoints = snapPointFactors.map(factor => containerHeight * factor);
  (0, _react.useEffect)(() => {
    if (containerRef.current) {
      setContainerHeight(containerRef.current.offsetHeight);
    }
  }, [containerRef]);
  (0, _react.useEffect)(() => {
    const position_ = {
      x: 0,
      y: containerHeight * .48
    };
    setPosition(position_);
    const closestSnap = position_.y;
    const snapIndex = snapPoints.indexOf(closestSnap);
    if (snapIndex >= 0 && posterItems[snapIndex]) {
      onBlockChange(posterItems[snapIndex]);
    }
  }, [containerHeight]);
  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;
    }
    // gameRef.current.scene.registerCogEvents();
  };

  // When drag stops, calculate the closest snap point and update position
  const handleStop = (e, data) => {
    // Find the snap point nearest to data.y
    const closestSnap = snapPoints.reduce((prev, curr) => Math.abs(curr - data.y) < Math.abs(prev - data.y) ? curr : prev);
    setPosition({
      x: data.x,
      y: closestSnap
    });
    // update the game state based on the selected index:
    const snapIndex = snapPoints.indexOf(closestSnap);
    if (snapIndex >= 0 && posterItems[snapIndex]) {
      onBlockChange(posterItems[snapIndex]);
    }
  };

  // Helper to get the current snap index from the current y position.
  const getCurrentSnapIndex = () => {
    if (!position) return 0;
    const index = snapPoints.findIndex(point => point === position.y);
    if (index === -1) {
      // If not exactly at a snap point, find the nearest one.
      let nearestIndex = 0;
      let smallestDiff = Math.abs(snapPoints[0] - position.y);
      for (let i = 1; i < snapPoints.length; i++) {
        const diff = Math.abs(snapPoints[i] - position.y);
        if (diff < smallestDiff) {
          smallestDiff = diff;
          nearestIndex = i;
        }
      }
      return nearestIndex;
    }
    return index;
  };
  const handleArrowUpClick = () => {
    if (!position) return;
    const currentIndex = getCurrentSnapIndex();
    if (currentIndex > 0) {
      const newIndex = currentIndex - 1;
      setPosition({
        x: position.x,
        y: snapPoints[newIndex]
      });
      if (posterItems[newIndex]) onBlockChange(posterItems[newIndex]);
    }
  };
  const handleArrowDownClick = () => {
    if (!position) return;
    const currentIndex = getCurrentSnapIndex();
    if (currentIndex < snapPoints.length - 1) {
      const newIndex = currentIndex + 1;
      setPosition({
        x: position.x,
        y: snapPoints[newIndex]
      });
      if (posterItems[newIndex]) onBlockChange(posterItems[newIndex]);
    }
  };
  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", {
        className: _styleModule.default.staticBlockItem,
        children: position && /*#__PURE__*/(0, _jsxRuntime.jsx)(staticBlockItem.icon, {
          className: _styleModule.default.staticBlockItemIcon
        })
      }), posterItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _styleModule.default.carouselItem,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {
          className: _styleModule.default.carouselItemIcon
        })
      }, index))]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _styleModule.default.downArrowContainer,
      onClick: handleArrowDownClick,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdKeyboardArrowDown, {
        color: _colors.MAIN_BLUE,
        size: 40
      })
    })]
  });
}