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

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

const RecordTable: DataTableType<Record> = DataTable

export default function Demo() {
  const [order, setOrder] = useState<DataTableSortOrder>('none')
  const [records, setRecords] = useState<Record[]>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    fetchRecords(order).then(setRecords).finally(
      () => setLoading(false)
    )
  }, [order])

  return (
    <RecordTable records={records} loading={loading}>
      <RecordTable.Column title="ID" accessor="id" />
      <RecordTable.Column title="创建时间" accessor="createAt" sort={{ order, onChange: setOrder }} />
      <RecordTable.Column title="名称" accessor="name" />
    </RecordTable>
  )
}

async function fetchRecords(order: DataTableSortOrder): Promise<Record[]> {
  return new Promise(resolve => setTimeout(() => {
    const sorted = sortBy(originalRecords.slice(0, 4), order)
    resolve(sorted)
  }, 500))
}

function sortBy(list: Record[], order: DataTableSortOrder): Record[] {
  if (order === 'none') return list
  return list.slice().sort((recordA, recordB) => {
    const [createAtA, createAtB] = [recordA, recordB].map(r => +new Date(r.createAt))
    return (
      order === 'asc'
      ? createAtA - createAtB
      : createAtB - createAtA
    )
  })
}