import React from 'react';

import InputError from '../Inputs/InputError';

interface Props {
  /**
   * callback function when the button is clicked
   */
  callback: (v: React.ChangeEvent<HTMLSelectElement>) => void;
  /**
   * An error message to be shown docked at the bottom of the input. If null, nothing will show.
   */
  error?: string | null;
  /**
   * id of the element
   */
  id?: string;
  /**
   * extra classes to be applied to the input itself
   */
  inputClass?: string;
  /**
   * If true, will show an (optional) tag next to the title. If false or not supplied, nothing will show.
   */
  optional?: boolean;
  /**
   * the list options of the button
   */
  options?: Array<Options>;
  /**
   * If true, will show a required *'s. If false or not supplied, nothing will show.
   */
  required?: boolean;
  /**
   * extra classes to be applied
   */
  themeClass?: string;
  /**
   * The title of the  label
   */
  title: string;
}

interface Options {
  title: string;
  value: string | number;
  selected: boolean;
}

const SelectDropdown = ({
  callback,
  error = null,
  id = 'nwc--select-dropdown',
  inputClass = 'border block radius--sm padding--sm font--14',
  optional = false,
  options = [
    { title: '-- Select Something --', value: -1, selected: false },
    { title: 'Option 1', value: '0', selected: true },
    { title: 'Option 2', value: '1', selected: false },
  ],
  required = false,
  themeClass = 'block',
  title,
}: Props) => {
  return (
    <span className={`nwc--buttonWrapper position--relative ${themeClass}`}>
      <label className="font--14 font--dark" htmlFor={id}>
        {title}
        {required === true && (
          <sup data-test="component-input-required" className="font--error font--10">
            {' *'}
          </sup>
        )}
        {optional === true && (
          <sup data-test="component-input-optional" className="font--grey font--10">
            {' (optional)'}
          </sup>
        )}
      </label>
      <select id={id} name={id} className={inputClass} onChange={(v) => callback(v)}>
        {options &&
          options.map((item: any) => (
            <option key={item.value} selected={item.selected} value={item.value}>
              {item.title}
            </option>
          ))}
      </select>
      {error !== '' && error !== null && <InputError error={error} id={id} />}
    </span>
  );
};

export default SelectDropdown;