import React from "react";
import PropTypes from "prop-types";
import { Select } from "antd";

import "./MultiSelect-antd.css";
import "./MultiSelect.css";

const { Option } = Select;

const defaultProps = {
  options: [],
  defaultOptions: [],
  placeholder: "",
  onOptionSelect: () => {},
  disabled: false
};

const propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      value: PropTypes.string.isRequired,
      label: PropTypes.string,
      secoundaryLabel: PropTypes.string
    })
  ),
  defaultOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired
    })
  ),
  placeholder: PropTypes.string,
  onOptionSelect: PropTypes.func,
  disabled: PropTypes.bool
};

const MultiSelect = props => {
  const {
    options,
    defaultOptions,
    onOptionSelect,
    placeholder,
    disabled
  } = props;

  const onChange = selected => {
    const selectedOptions = options.filter(option =>
      selected.includes(option.value)
    );
    onOptionSelect(selectedOptions);
  };

  return (
    <Select
      mode="multiple"
      placeholder={placeholder}
      onChange={onChange}
      defaultValue={defaultOptions.map(option => option.value)}
      disabled={disabled}
    >
      {options.map(option => (
        <Option key={option.id} value={option.value}>
          <p>{option.label || option.value}</p>
          {option.secoundaryLabel && <span>{option.secoundaryLabel}</span>}
        </Option>
      ))}
    </Select>
  );
};

MultiSelect.defaultProps = defaultProps;
MultiSelect.propTypes = propTypes;

export { MultiSelect };