import cns from 'classnames'
import React, { Children, ComponentType, CSSProperties, isValidElement, ReactElement, ReactNode, TableHTMLAttributes, useContext, useMemo } from 'react'

import { ComponentSize, useLangData, usePrefix } from '../ConfigProvider'
import { Loading } from '../Loading'
import { Empty } from '../Empty'
import { concat, isDev } from '../utils'
import { DataTableContextValue, dataTableCtx } from './context'
import { useScrollBar, ScrollBarProvider } from './scroll-bar'
import { HorizontalScrollProvider, useHorizontalScroll } from './horizontal-scroll'
import { useColumnWidth, ColumnWidthProvider } from './column-width'
import { SelectionHeadCell, SelectionBodyCell, SelectionProvider } from './selection'
import { Pagination } from './pagination'
import { HeadCell, BodyCell, MeasureCell } from './cell'

import {
  DataTableColumnOptions, DataTableColumnOptionsWithAccessor, DataTableColumnOptionsWithoutAccessor,
  InternalColumnOptions, DataTablePaginationOptions, DataTableSelectionOptions, InternalRecord, InternalSelectionOptions
} from './defs'

export { DataTablePaginationAlign, DataTableColumnOptions, DataTableSortOrder, DataTableColumnSelectFilterValue } from './defs'

export type DataTableProps<R extends object = object> = {
  /** 尺寸 */
  size?: ComponentSize
  /** 列信息 */
  columns?: Array<DataTableColumnOptions<R, any>>
  /** 数据列表 */
  records: R[]
  /** 数据唯一标识对应的字段名 */
  recordIdAccessor?: keyof R
  /** 行选择配置，开启行选择要求提供 `recordIdAccessor` */
  selection?: DataTableSelectionOptions<R>
  /** 分页配置 */
  pagination?: DataTablePaginationOptions
  /** 是否加载中 */
  loading?: boolean
  /**
   * 通过 `children` 传入 `<Column />` 也可以指定列的配置信息。
   * 若指定了 prop `columns`，`children` 会被忽略。
   * */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** `table` 元素的 html 属性；当 `fixHead` 为 `true` 时, 会分别传给 head & body 对应的 `table` */
  tableHtmlProps?: TableHTMLAttributes<HTMLTableElement>
  /** 空状态下展示的内容，建议用 `Empty` 组件 */
  empty?: ReactNode
  /**
   * 边框配置
   * + `full` - 全边框
   * + `row` - 行与行之间才有边框
   * + `none` - 无边框
   */
  border?: 'row' | 'full' | 'none'
  /** 是否有斑马纹；若有斑马纹则 `border` 总是会被视作 `none` */
  zebra?: boolean
  /**
   * 是否开启“固定表头”；开启固定表头后，
   * + 表格整体会使用 div 元素进行渲染，head & body 被分别渲染为独立的 table
   * + table-layout 会被设置为 `fixed`
   */
  fixHead?: boolean
  /**
   * 配置使用固定列时的表格内容的宽度，搭配 `Column` 的 prop `fixed` 一起使用；如果表格的宽度小于该宽度，则表格可以左右滑动，设置为 fixed 的列会在滑动到边缘时固定住。
   * 内部通过 `position: sticky` 实现固定效果，因此不支持 IE11
   */
  fixColumn?: { contentWidth: string }
  /** 生成行样式名 */
  getRowClassName?: (record: R, index: number) => string
  /** 行点击事件 */
  onRowClick?: (record: R, index: number) => void
}

interface WithColumn<R extends object> {
  // eslint-disable-next-line @typescript-eslint/naming-convention
  Column<K extends keyof R>(props: DataTableColumnOptionsWithAccessor<R, K>): ReactElement | null
  // eslint-disable-next-line @typescript-eslint/naming-convention
  Column(props: DataTableColumnOptionsWithoutAccessor<R>): ReactElement | null
}

/**
 * 用于方便地去定义含自定义 `Record` 类型的 `DataTable` / `DataTableColumn` 组件，使用姿势：
 * ```ts
 * const MyTable: DataTableType<MyRecord> = DataTable
 * const MyTableColumn: DataTableColumnType<MyRecord> = DataTableColumn
 * ```
 * 在后续使用中 `MyTable` 等价于 `DataTable<MyRecord>`，`MyTableColumn` 等价于 `DataTableColumn<MyRecord>`
 */
export type DataTableType<R extends object> = ComponentType<DataTableProps<R>> & WithColumn<R>
export type DataTableColumnType<R extends object> = WithColumn<R>['Column']

const noop = () => undefined

export function DataTable<R extends object>({
  columns: columnsFromProps,
  records: recordsFromProps,
  recordIdAccessor,
  selection: selectionFromProps,
  pagination,
  loading = false,
  children,
  className: classNameFromProps,
  style,
  tableHtmlProps,
  empty,
  size = 'default',
  border = 'row',
  zebra = false,
  fixHead = false,
  fixColumn,
  getRowClassName,
  onRowClick
}: DataTableProps<R>) {
  if (selectionFromProps != null && recordIdAccessor == null) throw new Error('`recordIdAccessor` is required while `selection` enabled.')

  const selection: InternalSelectionOptions | undefined = useMemo(() => (
    selectionFromProps == null
    ? undefined
    : {
      type: 'multiple',
      onChange: noop,
      ...selectionFromProps
    }
  ), [selectionFromProps])

  if (fixColumn != null) {
    const tableStyle = {
      width: fixColumn.contentWidth,
      minWidth: '100%', // 如果内容（table）宽度小于容器宽度，拉伸内容以进行平铺展示
      ...tableHtmlProps?.style
    }
    tableHtmlProps = { ...tableHtmlProps, style: tableStyle }
  }

  if (zebra) border = 'none'

  const baseCls = usePrefix('data-table')
  const columns = useMemo(
    () => getInternalColumns(columnsFromProps, children, selection),
    [columnsFromProps, children, selection]
  )
  const records = useMemo(
    () => getInternalRecords(recordsFromProps, recordIdAccessor),
    [recordsFromProps, recordIdAccessor]
  )
  const ctxValue = useMemo<DataTableContextValue>(
    () => ({ baseCls, size, fixHead, columns, records, empty, getRowClassName, onRowClick }),
    [baseCls, size, fixHead, columns, records, empty, getRowClassName, onRowClick]
  )

  const className = cns(
    baseCls,
    concat(baseCls, 'border', border),
    zebra && concat(baseCls, 'zebra'),
    concat(baseCls, 'size', size),
    fixHead && concat(baseCls, 'fix-head'),
    fixColumn && concat(baseCls, 'fix-column'),
    classNameFromProps
  )

  return (
    <dataTableCtx.Provider value={ctxValue}>
      <ScrollBarProvider>
        <ColumnWidthProvider>
          <HorizontalScrollProvider>
            <SelectionProvider selection={selection}>
              <InnerTable
                loading={loading}
                fixHead={fixHead}
                pagination={pagination}
                tableHtmlProps={tableHtmlProps}
                className={className}
                style={style}
              />
            </SelectionProvider>
          </HorizontalScrollProvider>
        </ColumnWidthProvider>
      </ScrollBarProvider>
    </dataTableCtx.Provider>
  )
}

// eslint-disable-next-line max-len
export function DataTableColumn<R extends object = any, K extends keyof R = keyof R>(props: DataTableColumnOptionsWithAccessor<R, K>): ReactElement | null
export function DataTableColumn<R extends object>(props: DataTableColumnOptionsWithoutAccessor<R>): ReactElement | null
export function DataTableColumn() {
  return null
}

DataTable.Column = DataTableColumn

function getInternalColumns<R extends object>(
  columnsFromProps: Array<DataTableColumnOptions<R, any>> | undefined,
  children: ReactNode | undefined,
  selection: InternalSelectionOptions | undefined
): InternalColumnOptions[] {
  const columns = columnsFromProps ?? children2ColumnOptions(children)
  const internalColumns: InternalColumnOptions[] = columns.map((column, i) => ({
    ...column,
    internalId: column.id ?? (column as any).accessor ?? `__data_table_index_${i}__`,
    render: (column.render ?? renderValue) as any // 这里类型有细节问题，不过不影响逻辑正确性
  }))
  if (selection != null) {
    const selectionColumn: InternalColumnOptions = {
      internalId: '__data_table_selection_column__',
      title: <SelectionHeadCell type={selection.type} />,
      width: '54px', // 54: 14 宽度 + 20 左右 padding
      fixed: selection.fixed,
      // eslint-disable-next-line react/display-name
      render: (_, record, index: number) => (
        <SelectionBodyCell
          index={index}
          type={selection.type}
          disabled={selection.disableWhen?.(record, index) ?? false}
          hidden={selection.hiddenWhen?.(record, index) ?? false}
        />
      )
    }
    internalColumns.unshift(selectionColumn)
  }
  return internalColumns
}

function renderValue(v: unknown): ReactNode {
  return v + ''
}

// 将 children（<Column /> 组）转为 ColumnOptions 列表
function children2ColumnOptions<R extends object>(children: ReactNode): Array<DataTableColumnOptions<R, any>> {
  const columns: Array<DataTableColumnOptions<R, any>> = []
  Children.toArray(children).filter(isValidElement).forEach(
    ({ type, props }) => {
      if (type !== DataTableColumn) {
        if (isDev) {
          // eslint-disable-next-line no-console
          console.warn('Unknown element type, expected `<TableColumn />`, while got', type)
        }
        return
      }
      columns.push(props as DataTableColumnOptions<R, any>)
    }
  )
  return columns
}

function getInternalRecords<R extends object>(
  recordsFromProps: R[],
  recordIdAccessor: keyof R | undefined
): Array<InternalRecord<R>> {
  return recordsFromProps.map((record, i) => ({
    id: (recordIdAccessor != null ? record[recordIdAccessor] : i) + '',
    data: record
  }))
}

function InnerTable({ loading, fixHead, pagination, tableHtmlProps, className, style }: {
  loading: boolean
  fixHead: boolean
  pagination: DataTablePaginationOptions | undefined
  tableHtmlProps: TableHTMLAttributes<HTMLTableElement> | undefined
  className: string
  style: CSSProperties | undefined
}) {
  const { baseCls } = useContext(dataTableCtx)
  const headCls = concat(baseCls, 'head')
  const bodyCls = concat(baseCls, 'body')
  const paginationView = pagination && <Pagination {...pagination} />

  const horizontalScroll = useHorizontalScroll()
  const columnWidth = useColumnWidth()
  const scrollBar = useScrollBar()

  if (!fixHead) {
    const contentWrapperRef = (el: HTMLElement | null) => {
      columnWidth.setContainer(el)
      horizontalScroll.setScrollContainer(el)
    }
    return (
      <Loading loading={loading} className={className} style={style}>
        <div className={concat(baseCls, 'content-wrapper')} ref={contentWrapperRef}>
          <table {...tableHtmlProps}>
            <Colgroup />
            <thead className={headCls}>
              <InnerHeadContent />
            </thead>
            <tbody className={bodyCls}>
              <InnerBodyContent />
            </tbody>
          </table>
        </div>
        {paginationView}
      </Loading>
    )
  }

  const bodyRef = (el: HTMLElement | null) => {
    horizontalScroll.setScrollContainer(el)
    scrollBar.setScrollContainer(el)
  }
  return (
    <Loading loading={loading} className={className} style={style}>
      <div className={concat(baseCls, 'content-wrapper')} ref={columnWidth.setContainer}>
        <div className={headCls} ref={horizontalScroll.setSideScrollContainer}>
          <table {...tableHtmlProps}>
            <Colgroup isHead />
            <thead>
              <InnerHeadContent />
            </thead>
          </table>
        </div>
        <div className={bodyCls} ref={bodyRef}>
          <table {...tableHtmlProps}>
            <Colgroup />
            <tbody>
              <InnerBodyContent />
            </tbody>
          </table>
        </div>
      </div>
      {paginationView}
    </Loading>
  )
}

function InnerHeadContent() {
  const { baseCls, columns } = useContext(dataTableCtx)
  return (
    <tr className={concat(baseCls, 'head', 'tr')}>
      {columns.map(column => (
        <HeadCell key={column.internalId} column={column} />
      ))}
    </tr>
  )
}

function InnerBodyContent() {
  const { baseCls, columns, records, getRowClassName, onRowClick, empty } = useContext(dataTableCtx)
  const bodyCls = concat(baseCls, 'body')
  const trCls = concat(bodyCls, 'tr')
  const langData = useLangData('dataTable') // TODO: data-table?

  if (records.length === 0) {
    return (
      <tr className={concat(baseCls, 'placeholder')}>
        <td colSpan={columns.length}>
          {empty ?? <Empty title={langData.emptyText} />}
        </td>
      </tr>
    )
  }

  const measureRow = (
    <tr key="__measure_row__" className={concat(baseCls, 'measure-row')}>
      {columns.map(column => (
        <MeasureCell key={column.internalId} column={column} />
      ))}
    </tr>
  )

  const rows = records.map((record, recordIdx) => (
    <tr
      key={record.id}
      className={cns(trCls, getRowClassName?.(record.data, recordIdx))}
      onClick={() => onRowClick?.(record.data, recordIdx)}
    >
      {columns.map(column => (
        <BodyCell key={column.internalId} column={column} record={record} recordIdx={recordIdx} />
      ))}
    </tr>
  ))
  return <>{measureRow}{rows}</>
}

function Colgroup({ isHead = false }) {
  const { columns } = useContext(dataTableCtx)
  const { widths: realtimeWidths } = useColumnWidth()
  const { width: scrollBarWidth } = useScrollBar()
  return (
    <colgroup>
      {columns.map((column, i) => {
        let realtimeWidth = realtimeWidths[column.internalId]
        if (realtimeWidth != null && isHead && i === columns.length - 1) {
          realtimeWidth += scrollBarWidth
        }
        const width = isHead ? realtimeWidth : (column.width ?? 'auto')
        return <col key={column.internalId} style={{ width }} />
      })}
    </colgroup>
  )
}