import { ReactNode } from 'react'

import { CheckboxValue } from '../Checkbox'

/** 分页控件的对齐方式 */
export type DataTablePaginationAlign = 'center' | 'right'

/** 分页行为的配置项 */
export type DataTablePaginationOptions = {
  /**
   * 对齐方式
   * @default 'right'
   */
  align?: DataTablePaginationAlign
  /** 当前页 */
  currentPage: number
  /**
   * 每页有多少 `record`
   * @default 10
   */
  pageSize?: number
  /** `records` 总数 */
  total: number
  /**
   * `currentPage` 或者 `pageSize` 发生改变后触发
   * @param nextPage 下一页的页码 0 开始
   * @param nextPageSize 下一个 pageSize
   */
  onChange?(nextPage: number, nextPageSize: number): void
}

/** 行选择类型 */
export type DataTableSelectionType = 'single' | 'multiple'

/** 行选择选中项变更的回调函数 */
export type DataTableSelectionChangeHandler = (ids: string[]) => void

/** 排序方式 */
export type DataTableSortOrder = 'desc' | 'asc' | 'none'

/** 排序的配置项 */
export interface DataTableColumnSortOptions {
  /** 排序方式 */
  order: DataTableSortOrder
  /** 响应排序方式变更的回调函数 */
  onChange: (order: DataTableSortOrder) => void
}

/** 列固定的方向 */
export type DataTableColumnFixType = 'left' | 'right'

export type DataTableColumnSelectFilterValue = CheckboxValue
export type DataTableColumnSelectFilterItem<T> = {
  text: string
  value: T
}
export type DataTableColumnSelectFilterCallback<T> = (value: T) => void
export type DataTableColumnMultiSelectFilterOptions
  <T extends DataTableColumnSelectFilterValue = DataTableColumnSelectFilterValue> = {
    type: 'multi-select'
    value: T[]
    /**
     * 过滤项
     */
    optionItems: Array<DataTableColumnSelectFilterItem<T>>
    onChange: DataTableColumnSelectFilterCallback<T[]>
  }

export type DataTableColumnSelectFilterOptions
  <T extends DataTableColumnSelectFilterValue = DataTableColumnSelectFilterValue> = {
    type: 'select'
    value: T | null
    /**
     * 过滤项
     */
    optionItems: Array<DataTableColumnSelectFilterItem<T>>
    onChange: DataTableColumnSelectFilterCallback<T | null>
  }

// TODO 实现搜索选择过滤器
export type DataTableColumnFilterOptions = DataTableColumnSelectFilterOptions | DataTableColumnMultiSelectFilterOptions

export interface DataTableCommonColumnOptions {
  /**
   * column 的标识，作用类似 `key` 之于 React list，帮助 `Table` 将状态变更前后的 column 项正确地对应上；
   * `DataTable` 默认会使用字符串值的 `accessor` 作为 column 的 id，如果 column 没有对应的 accessor，
   * 且 column 列表会动态变化（如某列在特定条件下才会展示），建议给该 column 显式指定 `id`
   */
  id?: string
  title: ReactNode
  /**
   * 列宽度（含 padding）
   * @default 'auto'
   */
  width?: string
  /** 对排序行为的配置 */
  sort?: DataTableColumnSortOptions
  filter?: DataTableColumnFilterOptions
  /** 固定列，left 表示表格左侧的固定列，right 表示右侧 */
  fixed?: DataTableColumnFixType
}

/** 列的渲染函数 */
export type DataTableCellRender<R extends object, K extends (keyof R | void) = keyof R> =
  (value: K extends keyof R ? R[K] : void, record: R, index: number) => ReactNode

/** 列配置项（指定 `accessor`） */
export interface DataTableColumnOptionsWithAccessor<R extends object, K extends keyof R = keyof R>
  extends DataTableCommonColumnOptions {
  /** 当前列对应的字段名，用于从 Record 中读取当前列所需的数据；若指定，会作为 `Column` prop `id` 的默认值 */
  accessor: K
  render?: DataTableCellRender<R, K>
}

/** 列配置项（不指定 `accessor`） */
export interface DataTableColumnOptionsWithoutAccessor<R extends object> extends DataTableCommonColumnOptions {
  render?: DataTableCellRender<R, void>
}

/** 列配置项 */
export type DataTableColumnOptions<R extends object, K extends (keyof R | void) = (keyof R | void)> = (
  K extends keyof R
  ? DataTableColumnOptionsWithAccessor<R, K>
  : DataTableColumnOptionsWithoutAccessor<R>
)

export type InternalColumnOptions = DataTableCommonColumnOptions & {
  /** 会确保有（基于外部指定的 id、accessor、index 等信息） */
  internalId: string
  accessor?: string
  render: DataTableCellRender<object, any>
}

export type InternalRecord<R = object> = {
  id: string
  data: R
}

/** 行选择配置项 */
export type DataTableSelectionOptions<R extends object> = {
  /**
   * 行选择类型
   * + `multiple` 多选
   * + `single` 单选
   * @default 'multiple'
   */
  type?: DataTableSelectionType
  /** 当前选中的 ID 集合；ID 即通过 `recordIdAccessor` 得到的数据唯一标识 */
  selectedIds: string[]
  /** 当前选中的 ID 集合变更后触发的回调 */
  onChange?: DataTableSelectionChangeHandler
  /** 固定行选择这一列，用法同 `Column` prop `fixed` */
  fixed?: 'left'
  /** 控制是否禁用某行行选择 */
  disableWhen?: (record: R, index: number) => boolean
  /** 控制是否隐藏某行行选择 */
  hiddenWhen?: (record: R, index: number) => boolean
}

export type InternalSelectionOptions = DataTableSelectionOptions<any> & {
  type: DataTableSelectionType
  onChange: DataTableSelectionChangeHandler
}