import React, { useState } from "react";
import RenameInput from "./RenameInput";

type InputWithDropDownProps = {
    label: string;
    value: string;
    min?: number;
    max?: number;
    step?: number;
    defaultValue?: string;
    disabled?: boolean;
    options?: string[];
    activeOption?: string;
    onClick?: () => void;
    onChange: (newValue: string) => void;
    editableLabel?: boolean;
    placeholder?: string;
};

const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
    label,
    value,
    min,
    max,
    step,
    defaultValue,
    disabled = false,
    options,
    activeOption,
    onClick,
    onChange,
    editableLabel = false,
    placeholder = "Inherit",
}) => {
    const [openDropdown, setOpenDropdown] = useState(false);

    const separatedWords = label
        .split(/(?=[A-Z])/)
        .map((word) => word.trim())
        .join(" ");

    return (
        <div className="value-field-container">
            {editableLabel ? (
                <RenameInput value={label} />
            ) : (
                <label htmlFor={separatedWords} className="label">
                    {label}
                </label>
            )}

            <div className="input default" id={separatedWords}>
                <input
                    min={min}
                    max={max}
                    step={step}
                    type="number"
                    value={value} // Controlled input
                    disabled={disabled}
                    onChange={(e) => onChange(e.target.value)}
                    placeholder={placeholder}
                />

                {activeOption && (
                    <div
                        className="dropdown"
                        onClick={() => setOpenDropdown((prev) => !prev)}
                    >
                        <div className="active-option">{activeOption}</div>
                        {options && openDropdown && (
                            <div className="dropdown-options-list">
                                {options.map((option, index) => (
                                    <div
                                        key={index}
                                        className="dropdown-option"
                                        onClick={onClick}
                                    >
                                        {option}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};

export default InputWithDropDown;
