import React from "react";
import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
// import { useThree } from "@react-three/fiber";

interface PositionInputProps {
  onChange: (value: [number, number, number]) => void; // Callback for value change
  header: string;
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
  value: [number, number, number] | null;
  disabled?: boolean; // To enable/disable editing
}

const Vector3Input: React.FC<PositionInputProps> = ({
  onChange,
  header,
  placeholder = "Enter value", // Default placeholder
  type = "string", // Default type
  value,
  disabled = false, // Default to disabled
}) => {

  const handleChange = (index: number, newValue: string) => {
    if (!value) return;
    const updatedValue = [...value] as [number, number, number];
    updatedValue[index] = parseFloat(newValue) || 0;
    // console.log('updatedValue: ', updatedValue);
    onChange(updatedValue);
  };



  return (
    <div className="custom-input-container">
      <div className="header">
        {header}
      </div>
      <div className="inputs-container">
        {["X", "Y", "Z"].map((axis, i) => (
          <div className="input-container" key={axis}>
            <div className="custom-input-label">{axis}:</div>
            <input
              className="custom-input-field"
              type={type}
              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
              // onChange={(e) => handleChange(i, e.target.value)}
              placeholder={placeholder}
              disabled={disabled}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Vector3Input;