import * as React from 'react'
import { Card } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { RouteComponentProps } from '@reach/router'
import { parseQuery, stringifyParams } from '../../helpers/url'

import SearchInput from '../../components/SearchInput'

import './index.less'

type Props = FormComponentProps & RouteComponentProps

interface State {
  searchTerm: string
}

export default class extends React.Component<Props, State> {
  private onEnter = (searchTerm: string) => {
    const query = stringifyParams({
      term: searchTerm,
    })
    this.props.navigate(`/search/?${query}`)
  }

  public render() {
    const { term } = parseQuery(this.props.location.search)
    return (
      <Card bordered={false} className="search-card">
        <h1 className="main-index-logo">
          openscript<span className="main-index-logo-suffix">.run</span>
        </h1>
        <SearchInput onSearchEnter={this.onEnter} value={term} />
      </Card>
    )
  }
}
