import React, { useEffect } from "react";
import {
  useEditWidgetOptionsStore,
  useLeftData,
  useRightClickSelected,
  useRightSelected,
  useTopData,
} from "../../../store/useZone3DWidgetStore";

interface EditWidgetOptionProps {
  options: string[];
}

const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
  options,
}) => {
  const { top } = useTopData();
  const { left } = useLeftData();
  const { setRightSelect } = useRightSelected();
  const { setEditWidgetOptions } = useEditWidgetOptionsStore();

  useEffect(() => {

  }, [top, left]);

  return (
    <div
      className="editWidgetOptions-wrapper"
      style={{
        position: "absolute",
        top: `${top}px`,
        left: `${left}px`,
        zIndex: 10000,
      }}
    >
      <div className="editWidgetOptions">
        {options.map((option, index) => (
          <div
            className="option"
            key={index}
            onClick={(e) => {
              setRightSelect(option);
              setEditWidgetOptions(false);
            }}
          >
            {option}
          </div>
        ))}
      </div>
    </div>
  );
};

export default EditWidgetOption;
