import React, { useEffect, useState } from 'react'
import { search as SearchRepository } from '../api/repository'
import RepopositoryItem from './RepositoryItem'
import { RepositorySearchResultItem } from '../api/api'
import classes from './style/RepositoryList.module.css'

interface RepositoryListProps {

  /** 搜索关键词 */
  keyword:string

  /** 最多允许缓存多少页 */
  max_cache_page:number
}

/**
 * 默认每一页多少条记录
 * https://docs.github.com/en/rest/reference/repos
 */
const DEFAULT_PER_PAGE = 30

export default function RepositoryList (props:RepositoryListProps) {
  /** 当前页 */
  const [current_page, setCurrentPage] = useState(1)

  /** 总页码 */
  const [total_page, setTotalPage] = useState(0)

  /** 上一页按钮是否可点击 */
  const [prev_button_enable, setPrevButtonEnable] = useState(false)

  /** 下一页按钮是否可点击 */
  const [next_button_enable, setNextButtonEnable] = useState(false)

  /** 接口加载中 */
  const [loading, setLoading] = useState(false)

  const [list, setList] = useState<RepositorySearchResultItem[]>([])

  async function search (page:number) {
    setLoading(true)
    try {
      /* eslint-disable */
      var result = await SearchRepository(props.keyword, page)
    } catch (err) {
      setLoading(false)
      return
    }
    
    const _total_page = Math.ceil(result.total_count / DEFAULT_PER_PAGE)
    setTotalPage(_total_page)

    setCurrentPage(page)

    setList(result.items)

    setPrevButtonEnable(page>1)
    setNextButtonEnable(page<_total_page)

    setLoading(false)
  }

  useEffect(() => {
    search(1)
  }, [])

  function onClickPrev(){
    search(current_page-1)
  }

  function onClickNext(){
    search(current_page+1)
  }

  return (
    <div className={classes.wrapper}>
      <div className={classes['list-wrapper']}>
        <ul className={classes.list}>
          {
            list.map(item => <RepopositoryItem key={item.id} name={item.name} star_count={item.stargazers_count} fork_count={item.forks_count} />)
          }
        </ul>
        {
          list.length===0 && <span>暂无数据</span>
        }
        {
          loading && <div className={classes.loading}></div>
        }
      </div>

      <div className="action-bar">
        <button disabled={loading || !prev_button_enable} onClick={onClickPrev}>上一页</button>
        <button disabled={loading || !next_button_enable} onClick={onClickNext}>下一页</button>
        <span> {current_page} / {total_page}</span>
      </div>

    </div>
  )
}