import React, { Component } from 'react';
import { components } from 'react-select';
import PropTypes from 'prop-types';
import Icon from '../../../visuals/Icon/Icon';

import IconAccountCircle from '../../../visuals/Icon/svg/ic_account_circle.svg';
import IconUsers from '../../../visuals/Icon/svg/d_users.svg';
import IconAdd from '../../../visuals/Icon/svg/ic_add_circle.svg';

/** Custom Option component for the Multi Email Select  */
class Option extends Component {
  static propTypes = {
    label: PropTypes.string,
    value: PropTypes.string.isRequired,
    isDisabled: PropTypes.bool.isRequired,
    selectProps: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired,
  };
  static defaultProps = {
    label: '',
  };
  render() {
    const { label, value, isDisabled, selectProps, data } = this.props;
    const isNew = data.__isNew__;
    const isDomain = value.indexOf('@') === 0;
    let { icon } = data;
    if (isDomain) {
      icon = IconUsers;
    } else if (!data.icon) {
      icon = isNew ? IconAdd : IconAccountCircle;
    }
    return (
      <components.Option {...this.props}>
        <Icon dimension="small" icon={icon} />
        <div className="MultiEmailSelect__option-text">
          {isDomain ? (
            <div className="MultiEmailSelect__option-label">{selectProps.addDomainText}</div>
          ) : (
            <div className="MultiEmailSelect__option-label">
              {isNew && ` ${selectProps.newOptionText} `}
              {label}
              {isDisabled && ` ${selectProps.alreadyInListText}`}
            </div>
          )}
          <div className="MultiEmailSelect__option-value">{value}</div>
        </div>
      </components.Option>
    );
  }
}

export default Option;