// @flow
import React from 'react';

import SelectItem from './selectItem';

import type { Option } from './selectItem';

/** Props передаваемые в SelectList
  * @property {Array<Option>} options - значения и их отображаемые наименования
  * @property {function (selected: any): void} onSelectedChanged - коллбэк, принимающий выбранные
  * элементы
  * @property {Array<string>} selected - выбранные элементы
  * @property {Function} toggleExpanded - коллбэк скрывающий список.
  * @property {Function} toggleExpanded - коллбэк скрывающий список.
  * @property {boolean} isMulti - включает функционал мультиселекта
  */
type SelectListProps = {
  displayCheckboxes: Boolean,
  options: Array<Option>,
  selected: Array<string>,
  onSelectedChanged: (selected: any) => void,
  isMulti: boolean,
  toggleExpanded: Function,
};

/** Компонент SelectList - выводит список с вариантами выбора */
export default class SelectList extends React.Component<SelectListProps> {
  handleSelectionChanged = (option: Option, checked: boolean) => {
    const {
      selected,
      onSelectedChanged,
      isMulti,
      toggleExpanded,
    } = this.props;
    if (checked && isMulti) {
      onSelectedChanged([...selected, option.value]);
    } else if (isMulti) {
      const removed = selected.filter(v => v !== option.value);
      onSelectedChanged(removed);
    } else {
      onSelectedChanged([option.value]);
      toggleExpanded();
    }
  }

  renderItems(): any {
    const {
      displayCheckboxes,
      options,
      selected,
    } = this.props;

    return options.map(opt => (
      <li
        // eslint-disable-next-line no-prototype-builtins
        key={`${opt.value}`}
        className='omni-select__list-item'
      >
        <SelectItem
          displayCheckboxes={displayCheckboxes}
          option={opt}
          onSelectionChanged={c => this.handleSelectionChanged(opt, c)}
          checked={selected.includes(opt.value)}
        />
      </li>
    ));
  }

  render() {
    return <ul className='omni-select__list'>
      {this.renderItems()}
    </ul>;
  }
}