import React, { useState } from 'react'
import { RadioGroup, Radio, TablePaginationAlign, Button, Table, ComponentSize, Select, SelectOption, Link, TableColumnSelectFilterValue } from 'react-icecream'

import originalRecords from './shared-records'

const nextSizeMap = {
  default: 'small',
  small: 'default',
  large: 'default'
} as const

const nextBorderMap = {
  full: 'none',
  none: 'row',
  row: 'full'
} as const

export default function Demo() {
  const [border, setBorder] = useState<'row' | 'full' | 'none'>('row')
  const [idVisible, setIdVisible] = useState(false)
  const [size, setSize] = useState<ComponentSize>('default')
  const [zebra, setZebra] = useState(false)
  const [noData, setNoData] = useState(false)
  const [fixdHead, setFixdHead] = useState(false)
  const [contentWidth, setContentWidth] = useState('')
  const { records, loading, currentPage, pageSize, total, setPageInfo, filterValue, setFilterValue } = useData()
  const [enableSelection, setEnableSelection] = useState(false)
  const [selectedIds, setSelectedIds] = useState<string[]>(['1', '2'])
  const [enableRowSpan, setEnableRowSpan] = useState(false)
  const [align, setAlign] = useState<TablePaginationAlign>('right')

  function handleSelect(nextSelectedIds: string[]) {
    setSelectedIds(nextSelectedIds)
    console.log(nextSelectedIds)
  }
  return (
    <>
      <div style={{ marginBottom: '12px' }}>
        <Button type="primary" onClick={() => setIdVisible(v => !v)}>
          {`${idVisible ? '隐藏' : '展示'} ID 信息`}
        </Button>
        <Button onClick={() => setSize(nextSizeMap[size])}>切换到 {nextSizeMap[size]}</Button>
        <Button onClick={() => setZebra(!zebra)}>显示/隐藏 斑马纹</Button>
        <Button onClick={() => setBorder(nextBorderMap[border])}>切换到 {nextBorderMap[border]}</Button>
        <Button onClick={() => setNoData(!noData)}>显示/隐藏 空状态</Button>
        <Button onClick={() => setFixdHead(!fixdHead)}>开启/关闭 固定表头</Button>
        <Select<string> defaultValue={contentWidth} onChange={v => setContentWidth(v ?? '')} style={{ width: 150 }}>
          <SelectOption value="">不开启固定列</SelectOption>
          <SelectOption value="max-content">max-content</SelectOption>
          <SelectOption value="1500px">1500px</SelectOption>
        </Select>
        <Button onClick={() => setEnableRowSpan(!enableRowSpan)}>开启/关闭 行合并</Button>
        <Button onClick={() => setEnableSelection(!enableSelection)}>开启/关闭 行选择</Button>
        <RadioGroup value={align} onChange={setAlign}>
          <Radio value="center">居中对齐</Radio>
          <Radio value="right">右侧对齐</Radio>
        </RadioGroup>
      </div>
      <Table
        fixHead={fixdHead}
        border={border}
        zebra={zebra}
        records={noData ? [] : records}
        loading={loading}
        pagination={{ currentPage, pageSize, total, onChange: setPageInfo, align }}
        recordIdAccessor="id"
        size={size}
        fixColumn={{ contentWidth }}
        selection={enableSelection ? { selectedIds, onChange: handleSelect, fixed: contentWidth ? 'left' : undefined } : undefined}
        style={{ height: fixdHead ? '500px' : 'auto' }}
      >
        {
          idVisible && (
            <Table.Column
              id="idx"
              title="索引"
              width="40px"
              render={(_, __, idx) => idx + 1}
            />
          )
        }
        <Table.Column
          title="空间名称"
          accessor="name"
          fixed="left"
          getRowSpan={enableRowSpan ? (_, __, idx) => ((idx + 1) % 2 === 1 ? 2 : 0) : undefined}
        />
        <Table.Column
          title="空间类型"
          accessor="type"
          filter={{
            type: 'multi-select',
            value: filterValue,
            optionItems: [
              {
                text: '公开空间',
                value: '公开空间'
              },
              {
                text: '自有空间',
                value: '自有空间'
              },
              {
                text: '私有空间',
                value: '私有空间'
              }
            ],
            onChange: setFilterValue
          }}
        />
        <Table.Column
          title="存储区域"
          accessor="region"
        />
        <Table.Column
          title="空间权限"
          accessor="access"
        />
        <Table.Column
          title="操作"
          width="210px"
          render={() => (
            <span>
              <Link>概览</Link>
              <Link style={{ marginLeft: '16px' }}>文件</Link>
              <Link style={{ marginLeft: '16px' }}>设置</Link>
              <Link style={{ marginLeft: '16px' }}>域名</Link>
            </span>
          )}
        />
      </Table>
    </>
  )
}

function useData() {
  const [{ currentPage, pageSize }, setPageInfo] = useState({ pageSize: 10, currentPage: 0 })
  const [loading, setLoading] = useState(false)
  const [filterValue, setFilterValue] = useState<TableColumnSelectFilterValue[]>([])
  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)
      .filter(record => (filterValue.length > 0 ? filterValue.indexOf(record.type) > -1 : true)),
    currentPage,
    pageSize,
    setPageInfo: handleSetPageInfo,
    total: originalRecords.length,
    loading,
    setFilterValue,
    filterValue
  }
}