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

import originalRecords from './shared-records'

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

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
  }
}