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

import originalRecords, { Record } from './shared-records'

const columns: Array<TableColumnOptions<Record>> = [
  {
    title: '索引',
    width: '40px',
    render: (_: unknown, __: unknown, idx: number) => idx + 1
  },
  {
    title: '空间名称',
    width: '150px',
    accessor: 'name'
  },
  {
    title: '空间类型',
    accessor: 'type'
  },
  {
    title: '存储区域',
    accessor: 'region'
  },
  {
    title: '空间类型',
    accessor: 'access'
  },
  {
    title: '操作',
    width: '210px',
    render() {
      return (
        <span>
          <Link>概览</Link>
          <Link style={{ marginLeft: '16px' }}>文件</Link>
          <Link style={{ marginLeft: '16px' }}>设置</Link>
          <Link style={{ marginLeft: '16px' }}>域名</Link>
        </span>
      )
    }
  }
]

export default function Demo() {
  const { records, loading, currentPage, pageSize, total, setPageInfo } = useData()

  return (
    <div style={{ height: '735px' }}>
      <Table<Record>
        columns={columns}
        records={records}
        loading={loading}
        pagination={{ currentPage, pageSize, total, onChange: setPageInfo }}
      />
    </div>
  )
}

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