import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { debounce } from 'debounce';

import {autocompleteWiewsTerm, loadWiewsTerm} from 'vocabulary/actions/public';

import { Field } from 'redux-form';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Input from '@material-ui/core/Input';
import TextField from '@material-ui/core/TextField';
import FormControl from 'ui/common/forms/FormControl';
import Select from '@material-ui/core/Select';
import Markdown from 'ui/common/markdown';

interface ISelectFaoInstituteInternal extends React.ClassAttributes<any> {
  input: any;
  label: string;
  loadWiewsTerm: (code) => Promise<any>;
  autocompleteWiewsTerm: (code) => Promise<any>;
  meta?: any;
  t: any;
}

class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInternal, any> {

  protected handleInputChange = (event) => {
    this.setState({searchText: event.target.value});
    if (event.target.value) {
      this.doAutocomplete(event.target.value);
    }
  }
  private doAutocomplete = debounce((value) => {
    this.props.autocompleteWiewsTerm(value).then((suggestions) => {
      this.setState({suggestions});
    });
  }, 1000);
  protected handleClick = (event) => {
    this.setState({open: true, anchorEl: event.currentTarget});
  }
  protected handleRequestClose = () => {
    this.setState({open: false});
  }
  protected select = (value) => (event) => {
    const {input} = this.props;
    const institute = this.state.suggestions.find((inst) => inst.code === value);
    if (institute) {
      input.onChange({code: institute.code});
      this.setState({
        open: false,
        pickerList: {code: institute.code, title: institute.title},
      });
    } else {
      input.onChange('');
      this.setState({
        open: false,
        pickerList: null,
      });
    }
  }

  private constructor(props, context) {
    super(props, context);
    this.state = {
      disabled: false,
      pickerList: null,
      open: false,
      anchorEl: null,
      searchText: '',
      suggestions: [],
    };
  }

  public componentWillMount() {
    const {input: {value}} = this.props;

    if (value) {
      this.setState({
        pickerList: {
          code:  value.code,
          title: value.fullName || value.code,
        },
        disabled: true,
      });
    }
  }

  public componentWillReceiveProps(nextProps) {
    const { loadWiewsTerm } = this.props;
    if (! nextProps.input.value) {
      return this.setState({pickerList: null});
    }
    if (nextProps.input.value !== this.props.input.value) {
      const code = nextProps.input.value.code;
      const institute = this.state.suggestions.find((inst) => inst.code === code);
      if (institute) {
        this.setState({pickerList: {code: institute.code, title: institute.title}});
      } else {
        loadWiewsTerm(code).then((inst) => {
          this.setState({pickerList: {code: inst.code, title: inst.title}});
        });
      }
    }
  }

  public render() {
    const {label, meta, t} = this.props;
    const {pickerList: inputValue, disabled} = this.state;
    return (
      <FormControl fullWidth meta={ meta } label={ label } disabled={ disabled }>
        <Select
          onClick={ !disabled ? this.handleClick : null }
          value={ inputValue }
          input={ <Input/> }
          MenuProps={ {
            open: false,
          } }
        >
          {
            this.state.pickerList ? (
              <MenuItem value={ inputValue }>
                <Markdown basic source={ this.state.pickerList.title }/>
              </MenuItem>) : null
          }
        </Select>
        <Menu
          anchorEl={ this.state.anchorEl }
          open={ this.state.open }
          onClose={ this.handleRequestClose }
        >
          <MenuItem>
            <TextField
              fullWidth
              value={ this.state.searchText }
              label={ t('partners.admin.c.institutePicker.search') }
              onChange={ this.handleInputChange }
            />
          </MenuItem>
          {
            this.state.suggestions.map((inst, index) => (
              <MenuItem onClick={ this.select(inst.code) } key={ `fao-institute-${index}` }>
                <Markdown basic source={ `${inst.code} - ${inst.title}` }/>
              </MenuItem>
            ))
          }
        </Menu>
      </FormControl>
    );
  }
}

interface IFaoInstitutePicker extends React.ClassAttributes<any> {
  name: string;
  label: string;
  loadWiewsTerm: (code) => Promise<any>;
  autocompleteWiewsTerm: (code) => Promise<any>;
  className?: string;
  t: any;
}

class FaoInstitutePicker extends React.Component<IFaoInstitutePicker, any> {

  public render() {
    const {name, label, className, loadWiewsTerm, autocompleteWiewsTerm, t} = this.props;

    return (
      <div className={ className }>
        <Field
          name={ name }
          component={ SelectFaoInstituteInternal }
          label={ label }
          loadWiewsTerm={ loadWiewsTerm }
          autocompleteWiewsTerm={ autocompleteWiewsTerm }
          t={ t }
        />
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadWiewsTerm,
  autocompleteWiewsTerm,
}, dispatch);

export default translate()(connect(null, mapDispatchToProps)(FaoInstitutePicker));