/* eslint-disable max-len */

import React, { useEffect, useState } from 'react'

import { DataTable, DataTableType, Form, FormItem, Select, SelectOption, Switch, Link } from 'react-icecream'

import { ComponentSize } from '../../ConfigProvider'
import { TableColumnSelectFilterValue } from '../../Table'
import originalRecords, { Record } from './shared-records'

const BucketTable: DataTableType<Record> = DataTable

export default function Demo() {

  const [size, sizeInput] = useSizeInput('default')
  const [border, borderInput] = useBorderInput('row')
  const [zebra, zebraInput] = useZebraInput(false)
  const [idVisible, idVisibleInput] = useIdVisibleInput(true)
  const [data, dataInput] = useDataInput('default')
  const [fixHead, fixHeadInput] = useFixHeadInput(true)
  const [fixColumn, fixColumnInput] = useFixColumnInput('max-content')
  const [selection, selectionInput] = useSelectionInput(true)
  const [selectedIds, setSelectedIds] = useState<string[]>(['1', '2'])
  useEffect(() => console.log('Selected:', selectedIds), [selectedIds])
  const selectionOptions = {
    selectedIds,
    onChange: setSelectedIds,
    fixed: fixColumn ? 'left' as const : undefined
  }
  const [pagination, paginationInput] = usePaginationInput(false)
  const [paginationAligh, paginationAlighInput] = usePaginationAlignInput('right', pagination)
  const { records, loading, currentPage, pageSize, total, setPageInfo, filterValue, setFilterValue } = useData(pagination)

  return (
    <section>
      <Form layout="inline" size="small" footer={null}>
        {sizeInput}
        {borderInput}
        {zebraInput}
      </Form>
      <Form layout="inline" size="small" footer={null}>
        {paginationInput}
        {paginationAlighInput}
      </Form>
      <Form layout="inline" size="small" footer={null}>
        {dataInput}
        {idVisibleInput}
        {selectionInput}
      </Form>
      <Form layout="inline" size="small" footer={null}>
        {fixHeadInput}
        {fixColumnInput}
      </Form>
      <BucketTable
        size={size}
        border={border}
        zebra={zebra}
        records={data === 'default' ? records : []}
        loading={loading}
        fixHead={fixHead}
        fixColumn={fixColumn !== 'disabled' ? { contentWidth: fixColumn } : undefined}
        recordIdAccessor="id"
        selection={selection ? selectionOptions : undefined}
        style={{ maxHeight: fixHead ? '500px' : 'none' }}
        pagination={
          pagination
          ? { currentPage, pageSize, total, onChange: setPageInfo, align: paginationAligh }
          : undefined
        }
      >
        {idVisible && <BucketTable.Column title="ID" accessor="id" width="80px" />}
        <BucketTable.Column title="空间名称" accessor="name" />
        <BucketTable.Column
          title="空间类型"
          accessor="type"
          width="120px"
          filter={{
            type: 'multi-select',
            value: filterValue,
            optionItems: [
              {
                text: '公开空间',
                value: '公开空间'
              },
              {
                text: '自有空间',
                value: '自有空间'
              },
              {
                text: '私有空间',
                value: '私有空间'
              }
            ],
            onChange: setFilterValue
          }}
        />
        <BucketTable.Column title="存储区域" accessor="region" width="100px" />
        <BucketTable.Column title="空间权限" accessor="access" width="100px" />
        <BucketTable.Column title="备注" render={(_, record) => `这里是空间 ${record.name} 的备注，balabala...`} />
        <BucketTable.Column
          title="操作"
          width="210px"
          fixed="right"
          render={() => (
            <span>
              <Link>概览</Link>
              <Link style={{ marginLeft: '16px' }}>文件</Link>
              <Link style={{ marginLeft: '16px' }}>设置</Link>
              <Link style={{ marginLeft: '16px' }}>域名</Link>
            </span>
          )}
        />
      </BucketTable>
    </section>
  )
}

function useSizeInput(defaultValue?: ComponentSize) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="尺寸">
      <Select style={{ width: '100px' }} value={value} onChange={v => setValue(v ?? undefined)}>
        <SelectOption value="default">默认</SelectOption>
        <SelectOption value="small">小</SelectOption>
      </Select>
    </FormItem>
  )
  return [value, view] as const
}

function useBorderInput(defaultValue?: 'row' | 'full' | 'none') {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="边框">
      <Select style={{ width: '160px' }} value={value} onChange={v => setValue(v ?? undefined)}>
        <SelectOption value="row">行之间边框</SelectOption>
        <SelectOption value="full">全边框</SelectOption>
        <SelectOption value="none">无边框</SelectOption>
      </Select>
    </FormItem>
  )
  return [value, view] as const
}

function useZebraInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = <FormItem label="斑马纹"><Switch checked={value} onChange={setValue} /></FormItem>
  return [value, view] as const
}

function usePaginationInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="分页">
      <Switch checked={value} onChange={setValue} />
    </FormItem>
  )
  return [value, view] as const
}

function usePaginationAlignInput(defaultValue: 'center' | 'right', pagination: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = pagination && (
    <FormItem label="翻页控件布局">
      <Select style={{ width: '160px' }} value={value} onChange={v => setValue(v ?? defaultValue)}>
        <SelectOption value="center">居中</SelectOption>
        <SelectOption value="right">右对齐</SelectOption>
      </Select>
    </FormItem>
  )
  return [value, view] as const
}

function useIdVisibleInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="ID 列">
      <Switch checkedChildren="可见" unCheckedChildren="隐藏" checked={value} onChange={setValue} />
    </FormItem>
  )
  return [value, view] as const
}

function useDataInput(defaultValue: 'default' | 'empty') {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="填充数据">
      <Switch
        checkedChildren="默认"
        unCheckedChildren="空"
        checked={value === 'default'}
        onChange={v => setValue(v ? 'default' : 'empty')}
      />
    </FormItem>
  )
  return [value, view] as const
}

function useFixHeadInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="固定表头">
      <Switch checked={value} onChange={setValue} />
    </FormItem>
  )
  return [value, view] as const
}

function useFixColumnInput(defaultValue: 'disabled' | 'max-content' | '1200px') {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="固定列">
      <Select style={{ width: '240px' }} value={value} onChange={v => setValue(v ?? defaultValue)}>
        <SelectOption value="disabled">不启用</SelectOption>
        <SelectOption value="max-content">启用，宽度 <code>max-content</code></SelectOption>
        <SelectOption value="1200px">启用，宽度 <code>1200px</code></SelectOption>
      </Select>
    </FormItem>
  )
  return [value, view] as const
}

function useSelectionInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <FormItem label="行选择">
      <Switch checked={value} onChange={setValue} />
    </FormItem>
  )
  return [value, view] as const
}

function useData(pagination: boolean) {
  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, 300))
    setLoading(false)
    setPageInfo({ pageSize: nextPageSize, currentPage: nextCurrentPage })
  }
  let records = originalRecords
  if (pagination) records = records.slice(currentPage * pageSize, (currentPage + 1) * pageSize)
  records = records.filter(record => (filterValue.length > 0 ? filterValue.indexOf(record.type) > -1 : true))
  return {
    records,
    currentPage,
    pageSize,
    setPageInfo: handleSetPageInfo,
    total: originalRecords.length,
    loading,
    setFilterValue,
    filterValue
  }
}