import React, { useContext } from 'react'
import { RepositorySearchContext } from '../context/RepositorySearchContext'

export default function RepositorySearchInput () {
  const context = useContext(RepositorySearchContext)

  return (
    <div>
      <label htmlFor="keyword-input">
      搜索关键词：
      <input type="text" id="keyword-input"
        value={context.keyword}
        onChange={({ target }) => {
          context.setKeyword(target.value)
        }}
        onKeyDown={evt => {
          const value = (evt.target as HTMLInputElement).value
          if (evt.key.toLocaleLowerCase() === 'enter') {
            context.setKeyword(value)
            context.search(value, 1)
          }
        }}
      />
      </label>

      <button onClick={() => {
        context.search(context.keyword, 1)
      }} disabled={context.loading}>搜索</button>
    </div>
  )
}