import * as _ from "lodash";
import * as React from "react";
import ReactSelect from "react-select/lib/Async";

import { Input, IInputProps } from "../Input";

export interface ISelectProps {
  id: string;
  placeholder?: string;
  defaultValue?: { value: string, label: string, input?:  IInputProps };
  defaultOptions?: Array<{ value: string, label: string, input?:  IInputProps}>;
  noOptionsMessage?: string;
  isSearchable?: boolean;
  hideDropdown?: boolean;
  subtext?: string;
  supertext?: string;
  loadOptions?: (inputValue: string, complete: (value: any) => void) => any;
  onChange?: (id: string, selectedOption: string | number | { value: string, label: string, input?: IInputProps }) => void;
}

interface ISelectState {
  selectedOption: { value: string, label: string, input?: IInputProps };
}

const defaultSelectState: ISelectState = {
  selectedOption: null,
};

export class Select extends React.PureComponent<ISelectProps, ISelectState> {
  public static getDerivedStateFromProps(props: ISelectProps, state: ISelectState) {
    return {
      selectedOption: state.selectedOption || props.defaultValue,
    };
  }

  public state: ISelectState = defaultSelectState;

  public componentDidMount() {
    if (this.props.defaultValue) {
      this.handleChange(this.props.defaultValue);
    }
  }

  public render() {
    return (
      <div id={this.props.id} className={`select__container ${this.props.hideDropdown && "select__container--hide-dropdown"}`}>
        <ReactSelect
          isSearchable={this.props.isSearchable}
          defaultOptions={this.props.defaultOptions}
          cacheOptions={true}
          isLoading={true}
          loadOptions={this.loadOptions}
          className="select"
          classNamePrefix="select"
          onChange={this.handleChange}
          {...this.props.defaultValue && { defaultValue: this.props.defaultValue }}
          {...this.props.placeholder && { placeholder: this.props.placeholder }}
          {...this.props.noOptionsMessage && { noOptionsMessage: () => this.props.noOptionsMessage }}
      />
        {!_.isEmpty(this.props.supertext) && <span className="select__supertext">{this.props.supertext}</span>}
        {!_.isEmpty(this.props.subtext) && <span className="select__subtext">{this.props.subtext}</span>}

        {this.state.selectedOption && this.state.selectedOption.input && (
          <div className="select__selected-option-input">
            <Input {...this.state.selectedOption.input} id={`${this.props.id}-${this.state.selectedOption.input.id}`} onChange={(id, value) => {
              this.props.onChange(id, value)
            }} />
          </div>
        )}
      </div>
    );
  }

  private handleChange = (selectedOption: any) => {
    this.setState({
      selectedOption,
    }, () => {
      this.props.onChange(this.props.id, selectedOption);
    });
  }

  private loadOptions = (inputValue: string, complete: any) => {
    if (this.props.loadOptions) {
      this.props.loadOptions(inputValue, complete);
    } else {
      complete(this.props.defaultOptions);
    }
  }
}