import { ChangeEvent, useState } from 'react';

export interface FilterSelectInputProps {
  title: string;
  selectValue: string | undefined;
  selectSetter?: (value: any) => void;
  selectOptions: Array<Record<string, string>>;
  inputValue: string | undefined;
  inputSetter?: (value: any) => void;
};
export const FilterSelectInput = ({
  title,
  selectValue,
  selectSetter,
  selectOptions,
  inputValue,
  inputSetter
}: FilterSelectInputProps) => {
  const [selectVal, setSelectVal] = useState();
  const [inputVal, setInputVal] = useState();

  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;
  };

  const onChangeSelect = (e: ChangeEvent<HTMLSelectElement>) => {
    let value = e.target.value;
    if(!!selectSetter){
      selectSetter(value);
    }
  };

  const onChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value;
    if(!!inputSetter){
      inputSetter(value);
    }
  };

  return (
    <>
      <div className="opt-field">
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ title }</div>
        <div className="opt-controls">
          <select 
            className="w-110"
            value={ selectValue } 
            onChange={ onChangeSelect }
          >
          { getSelectOptions() }
          </select>
          <input
            className="flex-1"
            type="text"
            style={{ height: '38px'}}
            value={ inputValue }
            onChange={ onChangeInput }
          />
        </div>
      </div>
    </>
  );
};