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

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

const columnIdx: TableColumnOptions<Record, void> = {
  title: '索引',
  width: '40px',
  render: (_, __, idx) => idx + 1,
  fixed: 'left'
}
const columnName: TableColumnOptions<Record, 'name'> = {
  title: '空间名称',
  width: '150px',
  accessor: 'name',
  render: name => name,
  fixed: 'left'
}
const columnType: TableColumnOptions<Record, 'type'> = {
  title: '空间类型',
  accessor: 'type'
}
const columnRegion: TableColumnOptions<Record, 'region'> = {
  title: '存储区域',
  accessor: 'region'
}
const columnAccess: TableColumnOptions<Record, 'access'> = {
  title: '空间权限',
  accessor: 'access'
}
const columnOperator: TableColumnOptions<Record> = {
  title: '操作',
  width: '210px',
  fixed: 'right',
  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>
        fixColumn={{ contentWidth: 'max-content' }}
        columns={[columnIdx, columnName, columnType, columnRegion, columnAccess, columnOperator]}
        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
  }
}