import { ChangeEvent } from 'react';

export interface FilterSelectInputProps {
  title: string;
  selectValue: string;
  selectSetter: (value: any) => void;
  selectOptions: Array<Record<string, string>>;
  inputValue: string;
  inputSetter: (value: any) => void;
};
export const FilterSelectInput = ({
  title,
  selectValue,
  selectSetter,
  selectOptions,
  inputValue,
  inputSetter
}: FilterSelectInputProps) => {
  
  const getSelectOptions = () => {
    let rs = [];
    for(let i=0;i<selectOptions.length;i++){
      rs.push(
        <option
          key={ `key-filter-select-input-${i}` }
          value={ selectOptions[i]?.value }
        >{ selectOptions[i]?.name }</option>
      );
    }
    return rs;
  };

  return (
    <>
      <div className="opt-field">
        <div className="opt-label">{ title }</div>
        <div className="opt-controls">
          <select 
            className="w-110"
            value={ selectValue } 
            onChange={ (e: any) => selectSetter(e.target.value)}
          >
          { getSelectOptions() }
          </select>
          <input
            className="flex-1"
            type="text"
            placeholder=""
            value={ inputValue }
            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
          />
        </div>
      </div>
    </>
  );
};