import React, { PropTypes } from 'react';
import classNames from 'classnames';
import KdPopover from '../KdPopover';
import { dispatchCustomEvent } from '../../utils';
import { ASC, DESC } from '../../constants';

const defaultProps = {
  isChickletNone: false,
  isLoading: false,
  hasMainSelector: false,
  autocompleteVisible: false,
  draggable: false,
  direction: ASC,
  renderClearTextboxButton: false,
  chicklets: {
    sortable: false,
    visible: true,
    fullwidth: false,
    buttons: {
      ascDesc: { visible: false },
      info: { visible: false },
    },
    events: {},
    clearAll: { visible: false },
  },
};

const propTypes = {
  onRemove: PropTypes.func,
  label: PropTypes.string,
  value: PropTypes.oneOfType([
    PropTypes.string, PropTypes.array, PropTypes.number, PropTypes.object,
  ]),

  isChickletNone: PropTypes.bool,
  hasMainSelector: PropTypes.bool,
  isLoading: PropTypes.bool,
  autocompleteVisible: PropTypes.bool,
  toggleItemDirection: PropTypes.func,
  direction: PropTypes.string,
  api: PropTypes.shape({
    url: PropTypes.string.isRequired,
    key: PropTypes.string.isRequired,
  }),
  kdFilterModel: PropTypes.object,
  item: PropTypes.object,
  renderClearTextboxButton: PropTypes.bool,
  draggable: PropTypes.bool,
  category: PropTypes.string,
  chicklets: PropTypes.shape({
    sortable: PropTypes.bool,
    visible: PropTypes.bool,
    fullwidth: PropTypes.bool,
    prefix: PropTypes.string,

    buttons: PropTypes.shape({
      ascDesc: PropTypes.shape({ visible: PropTypes.bool }),
      info: PropTypes.shape({ visible: PropTypes.bool }),
    }),

    events: PropTypes.shape({
      onClick: PropTypes.func,
      onClose: PropTypes.func,
    }),

    clearAll: PropTypes.shape({
      visible: PropTypes.bool,
      onClick: PropTypes.func,
    }),
  }),
};

class KdItemSelected extends React.Component {
  constructor(props) {
    super(props);

    this.handleRemove = this.handleRemove.bind(this);
    this.handleOnClick = this.handleOnClick.bind(this);
    this.renderLabel = this.renderLabel.bind(this);
    this.renderItemWithIcon = this.renderItemWithIcon.bind(this);
    this.renderItem = this.renderItem.bind(this);
    this.togglePopover = this.togglePopover.bind(this);
    this.toggleItemDirection = this.toggleItemDirection.bind(this);

    this.state = { isPopoverOpen: false, direction: this.props.direction };
  }

  togglePopover() {
    this.setState({ isPopoverOpen: !this.state.isPopoverOpen });
  }

  toggleItemDirection() {
    const { value, toggleItemDirection } = this.props;
    this.setState({ direction: this.state.direction === ASC ? DESC : ASC });

    if (toggleItemDirection) {
      toggleItemDirection(value);
    }
  }

  renderInfoButton() {
    const { chicklets, label, api, kdFilterModel } = this.props;
    if (chicklets.buttons.info.visible) {
      return (
        <div
          className="c-kd-item-selected__info-button"
          onClick={this.togglePopover}
        >
          {
            this.state.isPopoverOpen &&
              <KdPopover
                onRemove={this.togglePopover}
                {...{ label, api, kdFilterModel }}
              />
          }
        </div>
      );
    }
  }

  handleRemove() {
    const { onRemove, item } = this.props;
    onRemove && onRemove({ data: item });
    dispatchCustomEvent(this.rootElement, 'kd:ui:SelectEntity:onChickletClose',
      { data: item });
  }

  handleOnClick(event) {
    if (this.props.chicklets.events.onClick) {
      this.props.chicklets.events.onClick(event);
    }
  }

  renderLabel() {
    let formatedLabel = this.props.label;
    if (this.props.chicklets.prefix) {
      // NOTE: dangerouslySetInnerHTML throws an error with spaces inside span
      formatedLabel = <span dangerouslySetInnerHTML={{ __html: `${this.props.chicklets.prefix} ${this.props.label}` }} />;
    }
    return formatedLabel;
  }

  renderItemWithIcon() {
    const {
      hasMainSelector,
      isLoading,
      autocompleteVisible,
      renderClearTextboxButton,
    } = this.props;

    if (renderClearTextboxButton) {
      return (
        <div
          ref={ref => this.rootElement = ref}
          onClick={this.handleRemove}
          className={
            classNames({
              'u-iconx-inner-text': !hasMainSelector && autocompleteVisible,
              'u-iconx-inner-text-below-selector': hasMainSelector && autocompleteVisible,
              'u-margin-right-medium': isLoading,
            })
          }
        />
      );
    }

    return null;
  }

  renderArrow() {
    const { direction } = this.state;
    return (
      <span
        className={
          classNames({
            'c-kd-item-selected__arrow_up': direction === ASC,
            'c-kd-item-selected__arrow_down': direction === DESC,
          })}
        onClick={this.toggleItemDirection}
      />
    );
  }

  renderItem() {
    const { draggable, chicklets, category = 'default' } = this.props;
    return (
      <div
        ref={ref => this.rootElement = ref}
        onClick={this.handleOnClick}
        className={
          classNames(
            `c-kd-item-selected c-kd-item-selected--${category}`,
            { 'c-kd-item-selected__fullwidth': draggable },
          )
        }
      >
        {chicklets.buttons.ascDesc.visible && this.renderArrow()}
        <span className={`o-remove o-remove--${category}`} onClick={this.handleRemove} />
        {this.renderInfoButton()}
        <span className="c-kd-item-selected-text">
          {this.renderLabel()}
        </span>
      </div>
    );
  }

  render() {
    return this.props.isChickletNone ? this.renderItemWithIcon() : this.renderItem();
  }
}

KdItemSelected.propTypes = propTypes;
KdItemSelected.defaultProps = defaultProps;

export default KdItemSelected;
