import { List } from 'immutable';
import React, {Component, PropTypes} from 'react';

import { AbsRef } from '../../theory/ref';
import { Var, VARIABLE, INTRO, ELIM } from '../../theory/tm';
import Expression from '../Expression';
import Autocomplete from '../Autocomplete';

import styles from './Hole.scss';


export default class Hole extends Component {
  state = {
    completions: {
      variables: [],
      intros: [],
      elims: [],
    },
  };

  static contextTypes = {
    findCompletions: PropTypes.func.isRequired,
    fillHole: PropTypes.func.isRequired,
  };

  render() {
    const { variables, intros, elims } = this.state.completions;
    const { path, children } = this.props
    const { type } = children;

    const completions = [].concat(
      variables.map(item => ({ category: VARIABLE, item })),
      intros.map(item => ({ category: INTRO, item }))
      // elims.map(item => ({ category: ELIM, item }))
    );

    return (
      <div className={styles.hole}>
        <Autocomplete items={completions}
                      renderItem={::this.renderCompletion}
                      onChange={::this.handleAutocomplete}
                      onSelect={::this.handleSelect} />

        <div className={styles.ascription}>:</div>

        <Expression path={path.push('type')}>
          {type}
        </Expression>
      </div>
    );
  }

  renderCompletion({ category, item}, isHighlighted) {
    // TODO what is the right path here? tricky...
    const cls = isHighlighted ? styles.completionHl : '';

    return (
      <div className={styles.completion + ' ' + cls}>
        <div className={styles.completionCategory}>{category}</div>
        <div className={styles.completionName}>{item.name}</div>
        { item instanceof Var && (
            <div>
              <div>:</div>
              <Expression path={List()}>
                {item.type}
              </Expression>
            </div>
          )
        }
      </div>
    );
  }

  handleSelect(value, { category, item }) {
    this.context.fillHole(
      this.props.path,
      this.props.children.type,
      category,
      item
    );
  }

  componentDidMount() {
    const completions = this.fetchCompletions('');
    this.setState({ completions });
  }

  handleAutocomplete(value) {
    const completions = this.fetchCompletions(value);
    this.setState({ completions });
  }

  fetchCompletions(value) {
    const { children: hole, path } = this.props;
    // Need to find values in scope
    // ... of the right type.
    //
    // This is the really important bit -- search is type-directed.
    return this.context.findCompletions(
      hole.type,
      new AbsRef({ path }),
      value
    );
  }
}

@@ -1205,146 +1205,8 @@
 %7D /%3E
-%0A%0A        %3Cdiv className=%7Bstyles.ascription%7D%3E:%3C/div%3E%0A%0A        %3CExpression path=%7Bpath.push('type')%7D%3E%0A          %7Btype%7D%0A        %3C/Expression%3E
 %0A   

Remove extra type annotation.