import type { Component, VNode } from 'vue';
import { h } from 'vue';
import type { ButtonProps, DataTableColumn, DataTableColumns } from 'naive-ui';
import { NButton, NSpace } from 'naive-ui';
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
import type { safeClient } from '@/service/api';
import type TableBase from './table-base.vue';

export type TableBaseExpandColumn<T = InternalRowData> = {
  operations?: (row: T) => Array<Partial<ButtonProps> & { contentText: string }>;
  key: string;
  title: string;
};

type TableBaseColumn<T = InternalRowData> = DataTableColumn<T> & TableBaseExpandColumn<T>;

export type TableBaseColumns<T = InternalRowData> = Array<TableBaseColumn<T>>;

export type TableInst = InstanceType<typeof TableBase>;

export interface Pagination {
  pageIndex: number;
  pageSize: number;
  total?: number;
  [key: string]: any;
}

export type TableFetchData = (query: {
  pagination: Pagination;
  filter?: Record<string, any>;
}) => ReturnType<typeof safeClient>;

export type TableFilterColumn = {
  key: string;
  title: string;
  component?: Component | VNode;
  componentProps?: Record<string, any>;
};

export type TableFilterColumns = Array<TableFilterColumn>;

export function transformColumns<T = InternalRowData>(columns: TableBaseColumns<T>): DataTableColumns<T> {
  return columns.map(col => {
    return {
      ...col,
      ellipsis: {
        tooltip: true
      },
      render: col.operations
        ? (row: T) =>
            h(NSpace, null, {
              default: () => col.operations!(row).map(item => h(NButton, item, { default: () => item.contentText }))
            })
        : (col as any).render
    } as TableBaseColumn<T>;
  });
}

export function transformHeaderColumns<T = any>(columns: TableBaseColumns<T>): NaiveUI.TableColumnCheck[] {
  return columns
    .filter(col => {
      return !col.fixed;
    })
    .map(col => ({
      key: col.key,
      title: col.title,
      checked: true,
      visible: true
    }));
}