import React from "react";
import classNames from "classnames";
import { observer } from "mobx-react";
import { store } from "app/stores/store";

export interface SearchResultProps {
  search: any;
}

@observer
export class SearchResult extends React.Component<SearchResultProps, any> {
  constructor(props) {
    super(props);

    this.state = {
      search: store.search
    };

    store.search.query();
  }

  render() {
    return this.state.search.sections.map(section => {
      return <SearchResultSection section={section} key={section.id} />;
    });
  }
}

export interface SectionProps {
  section: any;
}

@observer
export class SearchResultSection extends React.Component<SectionProps, any> {
  constructor(props) {
    super(props);
  }

  renderItem(item) {
    return (
      <a className="search-item" href={item.url} key={item.id}>
        <span className="search-item__icon">
          <i className="fa fa-th-large" />
        </span>
        <span className="search-item__body">
          <div className="search-item__body-title">{item.title}</div>
        </span>
      </a>
    );
  }

  toggleSection = () => {
    this.props.section.toggle();
  };

  render() {
    let collapseClassNames = classNames({
      fa: true,
      "fa-plus": !this.props.section.expanded,
      "fa-minus": this.props.section.expanded,
      "search-section__header__toggle": true
    });

    return (
      <div className="search-section" key={this.props.section.id}>
        <div className="search-section__header">
          <i
            className={classNames(
              "search-section__header__icon",
              this.props.section.icon
            )}
          />
          <span className="search-section__header__text">
            {this.props.section.title}
          </span>
          <i className={collapseClassNames} onClick={this.toggleSection} />
        </div>
        {this.props.section.expanded && (
          <div className="search-section__items">
            {this.props.section.items.map(this.renderItem)}
          </div>
        )}
      </div>
    );
  }
}