import React, { FC } from 'react';
import classNames from 'classnames';

import css from './index.module.css';
import { getModifier } from '../../helpers/getModifier';

export interface DropdownOption {
  value: string;
  name: string;
}

export interface DropdownProps {
  options: DropdownOption[];
  onChange?: (e) => void;
  disabled?: boolean;
  value?: string;
  label: string;
  hideLabel?: boolean;
  name: string;
  type?: 'normal' | 'filled';
}

const Dropdown: FC<DropdownProps> = ({
  options,
  onChange,
  value,
  disabled,
  label,
  name,
  type = 'normal',
  hideLabel,
}) => {
  const dropdownClassNames = classNames(css.dropdown, {
    [`${css[`dropdown${getModifier(type)}`]}`]: type,
  });

  return (
    <div className={dropdownClassNames} data-testid="Dropdown">
      {!hideLabel && <span className={css.dropdown__label}>{label}</span>}
      <div className={css.dropdown__wrapper}>
        <select
          aria-label={label}
          className={css.dropdown__select}
          onChange={onChange}
          value={value}
          disabled={disabled}
          name={name}
        >
          {options &&
            options.map(option => (
              <option key={option.value} value={option.value}>
                {option.name}
              </option>
            ))}
        </select>
      </div>
    </div>
  );
};

export default Dropdown;