import * as React from 'react'
import { Col, Row, Select, List, Radio, Icon, Button } from 'antd'
import PackageCard from '../../components/PackageCard'
import { compose, ChildDataProps, DataValue } from 'react-apollo'
import { withSearchResults, withPlatforms } from '../../graphql'
import {
  searchVariables,
  search,
  search_search_items,
} from '../../graphql/types/search'
import { Category } from '../../types/globalTypes'
import * as _ from 'underscore.string'

import './index.less'
import { platforms } from '../../graphql/types/platforms'
import PlatformSelect, {
  PlatformSelectValue,
} from '../../components/PlatformSelect'

export interface Props {
  term: string
  category?: Category
  platform: PlatformSelectValue
  onClickResult?: (item: search_search_items) => void
  onChangeCategory: (value: Category) => void
  onChangePlatform: (value: PlatformSelectValue) => void
}

interface ChildData {
  searchResult: DataValue<search, searchVariables>
  platforms: DataValue<platforms, {}>
}

interface IState {
  unfoldPlatformSelection: boolean
}

class SearchResults extends React.Component<Props & ChildData, IState> {
  state: IState = {
    unfoldPlatformSelection: false,
  }

  public render() {
    const { searchResult, onChangeCategory, category = null } = this.props
    const { search } = searchResult

    const { items = [], queryTime = 0 } = search || {}

    return (
      <div className="search-result-container">
        <Row style={{ paddingBottom: '12px' }}>
          <Col sm={18}>
            <Radio.Group
              defaultValue={category}
              onChange={e => onChangeCategory(e.target.value)}
            >
              <Radio.Button value={null}>All</Radio.Button>
              <Radio.Button value={'INSTALLER'}>
                <Icon type="appstore" /> Installer
              </Radio.Button>
              <Radio.Button value={'FIX'}>
                <Icon type="safety-certificate" /> Fix
              </Radio.Button>
              <Radio.Button value={'UTILITY'}>
                <Icon type="build" /> Utility
              </Radio.Button>
            </Radio.Group>
          </Col>
          <Col sm={6} style={{ paddingLeft: '5px', textAlign: 'right' }}>
            <PlatformSelect
              value={this.props.platform}
              onChange={this.props.onChangePlatform}
            />
          </Col>
        </Row>
        <Row className="search-result-time-row">
          <Col sm={24}>
            <span className="search-result-time">
              {[
                <span>
                  About {items.length} results (
                  <strong>{queryTime / 100}</strong> seconds)
                </span>,
                this.getSelectedPlatformText(),
                this.getSelectedCategoryText(),
              ]
                .filter(ele => ele !== null)
                .reduce((pre, next) => [pre, ', ', next] as any)}
            </span>
          </Col>
        </Row>
        <Row className="search-result-list-row">
          <List
            loading={searchResult.loading}
            dataSource={items}
            renderItem={this.renderItem}
          />
        </Row>
      </div>
    )
  }

  private getSelectedPlatformText = () => {
    const { platform } = this.props
    if (platform.codename && platform.dist && platform.os) {
      return (
        <span>
          <strong>
            {platform.dist} - {platform.codename}
          </strong>
        </span>
      )
    } else {
      return null
    }
  }

  private getSelectedCategoryText = () => {
    const { category } = this.props

    if (category) {
      return (
        <span>
          <strong>{category}</strong>
        </span>
      )
    } else {
      return null
    }
  }

  private onClickResult = (item: search_search_items) => {
    if (this.props.onClickResult) {
      this.props.onClickResult(item)
    }
  }

  private renderItem = (item: search_search_items) => {
    return <PackageCard data={item} onClick={this.onClickResult} />
  }
}

export default compose(
  withSearchResults,
  withPlatforms
)(SearchResults)
