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

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

const RecordTable: DataTableType<Record> = DataTable

const records = originalRecords.slice(0, 4)

export default function Demo() {
  const [order, setOrder] = useState<DataTableSortOrder>('none')
  const sortedRecords = sortBy(records, order)
  return (
    <RecordTable records={sortedRecords}>
      <RecordTable.Column title="ID" accessor="id" />
      <RecordTable.Column title="创建时间" accessor="createAt" sort={{ order, onChange: setOrder }} />
      <RecordTable.Column title="名称" accessor="name" />
    </RecordTable>
  )
}

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