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

type InputWithDropDownProps = {
  label: string;
  value: string;
  options?: string[]; // Array of dropdown options
  activeOption?: string; // The currently active dropdown option
  onClick?: () => void;
  onChange: (newValue: string) => void;
  editableLabel?: boolean;
};

const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
  label,
  value,
  options,
  activeOption,
  onClick,
  onChange,
  editableLabel = false,
}) => {
  const separatedWords = label
    .split(/(?=[A-Z])/)
    .map((word) => word.trim())
    .toString();

  const [openDropdown, setOpenDropdown] = useState(false);

  return (
    <div className="value-field-container">
      {editableLabel ? (
        <RenameInput value={label} />
      ) : (
        <label htmlFor={separatedWords} className="label">
          {label}
        </label>
      )}
      <div className="input default" id={separatedWords}>
        <input
          type="text"
          defaultValue={value}
          onChange={(e) => {
            onChange(e.target.value);
          }}
        />

        {activeOption && (
          <div
            className="dropdown"
            onClick={() => {
              setOpenDropdown(true);
            }}
          >
            <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;