import React, { PropTypes } from 'react';

import ClearAll from '../ClearAll';
import { ANY, CHICKLET_NONE } from '../../constants';
import { buildCustomOptions, buildCustomOption, buildChickletValue } from './options';
import wrap from '../ItemContainerWrapper';

const defaultProps = {
  emptyItems: true,
  mainSelectorOptionsCustom: [],
  selectedValuesInitial: [],
};

const propTypes = {
  emptyItems: PropTypes.bool,
  mainSelectorOptionsCustom: PropTypes.array,
  selectedValuesInitial: PropTypes.array,
  onOptionSelected: PropTypes.func,
  onItemAdded: PropTypes.func,
  onClearChicklets: PropTypes.func,
  widgetEventOnChangeCustom: PropTypes.func,
  widgetEventOnSelectAction: PropTypes.func,
  onSelectionHandler: PropTypes.func,
  onSetChicklets: PropTypes.func,
};

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

    this.mainSelectorOptionsCustom = buildCustomOptions(this.props.mainSelectorOptionsCustom);
    this.defaultOption = this.mainSelectorOptionsCustom[0];
    this.state = {
      selectedOption: this.defaultOption,
    };

    this.onSelectChange = this.onSelectChange.bind(this);
    this.onClearChicklets = this.onClearChicklets.bind(this);
  }

  componentWillMount() {
    if (this.props.selectedValuesInitial.length) {
      const customInitialOptions = this.props.selectedValuesInitial.map(
        option => buildCustomOption(option),
      );
      const selectedChicklets = customInitialOptions.map(
        option => buildChickletValue(option),
      );
      this.props.onSetChicklets(selectedChicklets);

      const selectedOption = [...customInitialOptions].pop();

      this.setState({
        selectedOption,
      }, () => this.props.onOptionSelected(selectedOption.id));
    } else {
      this.props.onOptionSelected(this.state.selectedOption.id);
    }
  }

  onSelectChange({ target }) {
    const selectedOption = this.mainSelectorOptionsCustom.find(
      option => option.id === target.value,
    );

    if (selectedOption.id === ANY) {
      this.props.onClearChicklets();
    } else {
      this.props.onItemAdded(buildChickletValue(selectedOption));
    }

    this.setState({
      selectedOption,
    }, () => {
      this.props.onOptionSelected(selectedOption.id);
      const event = {
        label: selectedOption.displayName,
        value: selectedOption.id,
        direction: selectedOption.direction,
      };

      if (this.props.widgetEventOnChangeCustom) {
        this.props.widgetEventOnChangeCustom(event);
      }

      if (this.props.onSelectionHandler) {
        this.props.onSelectionHandler(event);
      }
    });
  }

  onClearChicklets() {
    this.setState({
      selectedOption: this.defaultOption,
    }, () => this.props.onOptionSelected(this.defaultOption.id));
    this.props.onClearChicklets();
  }

  render() {
    return (
      <div className="infront ofd-select-sort-order">
        <div className="c-base-select">
          <select onChange={this.onSelectChange} value={this.state.selectedOption.id}>
            {
              this.mainSelectorOptionsCustom.map(option =>
                (
                  <option value={option.id} key={option.id}>{option.displayName}</option>
                ),
              )
            }
          </select>
        </div>
        {
          !this.props.emptyItems &&
            this.props.widgetEventOnSelectAction !== CHICKLET_NONE &&
            <ClearAll onClick={this.onClearChicklets} />
        }
      </div>
    );
  }
}

KdSelectSortOrder.propTypes = propTypes;
KdSelectSortOrder.defaultProps = defaultProps;

export default wrap(KdSelectSortOrder, true);
