import React, { useState } from 'react'
import { Table } from 'react-icecream'

import originalRecords from './shared-records'

export default function Demo() {
  const { records, loading, currentPage, pageSize, total, setPageInfo } = useData()
  return (
    <Table
      fixHead
      records={records}
      loading={loading}
      pagination={{ currentPage, pageSize, total, onChange: setPageInfo }}
      style={{ maxHeight: '500px' }}
    >
      <Table.Column
        id="idx"
        title="索引"
        width="40px"
        render={(_, __, idx) => idx + 1}
      />
      <Table.Column
        title="空间名称"
        accessor="name"
      />
      <Table.Column
        title="空间类型"
        accessor="type"
      />
    </Table>
  )
}

function useData() {
  const [{ currentPage, pageSize }, setPageInfo] = useState({ pageSize: 10, currentPage: 0 })
  const [loading, setLoading] = useState(false)
  async function handleSetPageInfo(nextCurrentPage: number, nextPageSize: number) {
    setLoading(true)
    await new Promise(r => setTimeout(r, 1000))
    setLoading(false)
    setPageInfo({ pageSize: nextPageSize, currentPage: nextCurrentPage })
  }
  return {
    records: originalRecords.slice(currentPage * pageSize, (currentPage + 1) * pageSize),
    currentPage,
    pageSize,
    setPageInfo: handleSetPageInfo,
    total: originalRecords.length,
    loading
  }
}