import React, { StatelessComponent } from 'react';
import Icon from 'components/icon';

import { ICON_NAMES } from 'utils/constants/assets';

import { DropdownProps, DropdownStyle } from './dropdown.types';

import * as MinimalStyles from './styles/dropdown.minimal.styles';
import * as NormalStyles from './styles/dropdown.normal.styles';

const Dropdown: StatelessComponent<DropdownProps> = (props): JSX.Element => {
  const allStyles: { [key in DropdownStyle]: any } = {
    [DropdownStyle.MINIMAL]: MinimalStyles,
    [DropdownStyle.NORMAL]: NormalStyles
  }

  const { options, style = DropdownStyle.NORMAL, maxWidth } = props
  const ComponentStyle = allStyles[style]
  const selectedOptions = options.filter(option => option.selected)

  return (
    <ComponentStyle.Dropdown maxWidth={maxWidth}>
      <ComponentStyle.Select
        fontSize={props.fontSize}
        onChange={props.onChange}
        defaultValue={props.placeholder ? 'disabled-option' : ''}
        value={selectedOptions.length ? selectedOptions[0][props.valueKey!] : null}
      >
        { props.placeholder &&
          <option
            disabled
            value="disabled-option"
          >
            {props.placeholder}
          </option>
        }
        {
          options.map((option, index) => (
            <option
              disabled={option.isDisabled}
              value={option[props.valueKey!]}
              key={option[props.valueKey!] + index}
            >
              {option[props.titleKey!]}
            </option>
          ))
        }
      </ComponentStyle.Select>
      <ComponentStyle.Arrow>
        <Icon iconName={ICON_NAMES.ARROW_DOWN} />
      </ComponentStyle.Arrow>
    </ComponentStyle.Dropdown>
  )
};

export default Dropdown;

Dropdown.defaultProps = {
  valueKey: 'slug',
  titleKey: 'title',
  fontSize: 2,
  useDisabled: false
};