import * as React from 'react';
import { type IInputGroup } from '../../Interfaces/IInputGroup';

interface ISelectProps {
  labelKey?: string
  labelText: string
  inputKey: string
  labelClassName: string
  inputClassName: string
  inputs: IInputGroup[]
  value?: string
  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
}

const className = `
        w-full
        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
        bg-white border-2 border-white rounded-lg placeholder-gray-800
        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;

export function Select(props: ISelectProps): JSX.Element {
  const options = [(
    <option key='symbol-none' value=''>None</option>
  )];

  props.inputs.forEach(input => {
    options.push(<option
      key={input.value}
      value={input.value}
    >
      {input.text}
    </option>);
  });

  return (
    <>
      <label
        key={props.labelKey}
        className={`text-xs font-medium text-gray-800 cursor-pointer ${props.labelClassName}`}
        htmlFor={props.inputKey}
      >
        {props.labelText}
      </label>
      <select
        id={props.inputKey}
        value={props.value}
        onChange={props.onChange}
        className={className}
      >
        {options}
      </select>
    </>
  );
}