import type {
  AkitableAction,
  AkitableColumn,
  AkitablePaginatedData,
  AkitablePaginationProps,
  SorterChangeEvent
} from '@akinon/akitable';
import { Akitable } from '@akinon/akitable';
 
const results = [
  {
    key: '1',
    name: 'Mike',
    age: 32
  },
  {
    key: '2',
    name: 'John',
    age: 42
  }
];
 
const MyComponent = () => {
  const data: AkitablePaginatedData = {
    count: results.length,
    results
  };
 
  const columns: AkitableColumn[] = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age'
    }
  ];
 
  const actions: AkitableAction[] = [
    {
      label: 'Delete',
      onSelect: (selectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys: ', selectedRowKeys);
      }
    }
    // Additional actions...
  ];
 
  const pagination: AkitablePaginationProps = {
    page: 1,
    size: 20
  };
 
  const handleSorterChange: SorterChangeEvent = (sorter) => {
    console.log('Sorter changed: ', sorter);
  };
 
  return (
    <Akitable
      isLoading={false}
      data={data}
      columns={columns}
      actions={actions}
      pagination={pagination}
      rowKey="key"
      onChangeSorter={handleSorterChange}
      // Additional Akitable props...
    />
  );
};
 
export default MyComponent;

interface AkitableData {
  [key: string]: any;
}
 
interface AkitablePaginatedData {
  count: number;
  next?: string | null;
  previous?: string | null;
  results: AkitableData[];
}

import type { TableColumnType } from 'antd';
 
interface AkitableColumn extends TableColumnType<AkitableData> {
  copyable?: boolean;
  editable?: boolean;
}

interface AkitableAction {
  label: string;
  onSelect: (selectedRowKeys: React.Key[]) => void;
}

interface AkitableActionColumnRenderParams {
  record: AkitableData;
  isEditing: boolean;
  isEditLoading: boolean;
  hasEditFormError: boolean;
  handleStartEdit: (e?: React.MouseEvent) => void;
  handleSaveEditingItem: () => Promise<void>;
  handleCancelEditingItem: () => void;
}
 
interface AkitableActionColumn {
  title?: ReactNode;
  width?: number | string;
  fixed?: 'left' | 'right' | boolean;
  className?: string;
  align?: 'left' | 'right' | 'center';
  render?: (params: AkitableActionColumnRenderParams) => ReactNode;
  items?: AkitableActionItem[];
  onNavigate?: (
    href: string,
    record: AkitableData,
    event: React.MouseEvent
  ) => void;
}

type AkitableActionItemValue<T> = T | ((record: AkitableData) => T);
 
// Every other `@akinon/ui-button` prop (`icon`, `iconSize`, `type`, `danger`,
// `tooltip`, `loading`, `ghost`, `block`, `className`, `data-*`, …) is accepted
// and forwarded to the rendered button. `size` is fixed to `small` by the
// action column, so it is not accepted here.
interface AkitableActionItem
  extends Omit<
    IButtonProps,
    'children' | 'disabled' | 'hidden' | 'href' | 'onClick' | 'size'
  > {
  key?: string;
  label?: ReactNode;
  href?: AkitableActionItemValue<string>;
  onClick?: (record: AkitableData, event: React.MouseEvent) => void;
  startEdit?: boolean;
  disabled?: AkitableActionItemValue<boolean>;
  hidden?: AkitableActionItemValue<boolean>;
}

type AkitableHeaderLayout = 'auto' | 'stacked';
 
interface AkitableHeaderProps {
  title?: string | ReactElement;
  extra?: ReactNode;
  downloadActions?: ReactNode;
  downloadActionsSlotWidth?: number;
  reserveDownloadActionsSpace?: boolean;
  trailingExtra?: ReactNode;
  // Layout of the header side. See "Header Layout" below.
  layout?: AkitableHeaderLayout;
}

interface AkitableFooterProps {
  extra?: ReactNode;
}

interface AkitableEmptyStateProps {
  icon?: ReactNode;
  description?: ReactNode;
}

// The default sizes stay as literals for editor suggestions, but any number is
// accepted so a custom `pageSizeOptions` list is not limited to them.
type AkitablePageSizes = 20 | 50 | 100 | 250 | (number & NonNullable<unknown>);
 
interface AkitablePaginationProps {
  page: number;
  size: AkitablePageSizes;
  pageSizeOptions?: readonly AkitablePageSizes[];
}

import {
  AKITABLE_DEFAULT_PAGE_SIZE_OPTIONS,
  type AkitablePaginationProps
} from '@akinon/akitable';
 
// Only the sizes the backend supports.
const pagination: AkitablePaginationProps = {
  page: 1,
  size: 20,
  pageSizeOptions: [20, 50, 100]
};
 
// Or derive the list from the defaults.
const derived: AkitablePaginationProps = {
  page: 1,
  size: 20,
  pageSizeOptions: AKITABLE_DEFAULT_PAGE_SIZE_OPTIONS.filter(
    size => size !== 250
  )
};

type RowClickEvent = (
  record: AkitableData,
  event?: React.MouseEvent<HTMLElement>,
  rowIndex?: number
) => void;

type RowEditCallback = (
  modifiedRecord: AkitableData,
  payload: AkitableData
) => void | Promise<void>;

type PaginationChangeEvent = (page: number, size: number) => void;

type SortOrder = 'descend' | 'ascend' | null;
 
interface SorterResult {
  column?: AkitableColumn;
  order?: SortOrder;
  field?: string | readonly string[];
  columnKey?: string;
}
 
type TableOnChangeSorter = SorterResult | SorterResult[];
 
type SorterChangeEvent = (sorter: TableOnChangeSorter) => void;

enum AkitableRowStatus {
  PENDING = 'pending',
  ERROR = 'error'
}

type AkitableRowSelectionType = 'checkbox' | 'radio';
 
type AkitableRowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
 
interface AkitableRowSelection {
  align?: 'left' | 'center' | 'right';
  checkStrictly?: boolean;
  columnTitle?: ReactNode | ((originalNode: ReactNode) => ReactNode);
  columnWidth?: string | number;
  fixed?: boolean | 'left' | 'right';
  getCheckboxProps?: (record: AkitableData) => Record<string, unknown>;
  getTitleCheckboxProps?: () => Record<string, unknown> & React.AriaAttributes;
  hideSelectAll?: boolean;
  preserveSelectedRowKeys?: boolean;
  renderCell?: (checked: boolean, record: AkitableData, index: number, originNode: ReactNode) => ReactNode;
  selectedRowKeys?: React.Key[];
  selections?: object[] | boolean;
  type?: AkitableRowSelectionType;
  onChange?: (selectedRowKeys: React.Key[], selectedRows: AkitableData[], info: { type: AkitableRowSelectMethod }) => void;
  onSelect?: (record: AkitableData, selected: boolean, selectedRows: AkitableData[], nativeEvent: Event) => void;
}

import { Akitable } from '@akinon/akitable';
import { Button } from '@akinon/ui-button';
 
<Akitable
  columns={columns}
  data={data}
  rowKey="pk"
  pagination={pagination}
  onPaginationChanged={handlePaginationChange}
  header={{
    title: 'Attribute Values',
    layout: 'stacked',
    downloadActions: (
      <>
        <Button size="small" type="primary" icon="download">
          XLS
        </Button>
        <Button size="small" type="primary" icon="download">
          CSV
        </Button>
      </>
    )
  }}
/>;

import { Akitable } from '@akinon/akitable';
 
<Akitable
  {...tableProps}
  toolbar={{ size: 'small', showSelectedCount: false, showTotal: false }}
/>;

type AkitableCssLength = number | string; // a pixel number or any CSS length
 
interface AkitableToolbarProps {
  size?: 'default' | 'small';
  showSelectedCount?: boolean;
  showTotal?: boolean;
  gap?: AkitableCssLength;
  controlHeight?: AkitableCssLength;
  fontSize?: AkitableCssLength;
  controlPaddingInline?: AkitableCssLength;
  downloadIconSize?: AkitableCssLength;
  downloadSize?: AkitableCssLength;
  downloadFontSize?: AkitableCssLength;
}

<Akitable
  {...tableProps}
  toolbar={{ size: 'small' }}
  style={
    { '--akitable-toolbar-control-padding-inline': '0.5rem' } as React.CSSProperties
  }
/>

<Akitable
  data={data}
  columns={columns}
  rowKey="id"
  actionColumn={{
    title: 'Actions',
    fixed: 'right',
    onNavigate: (href) => navigate(href),
    items: [
      {
        key: 'edit',
        icon: 'edit',
        tooltip: 'Edit',
        type: 'link',
        href: (record) => `/products/${record.id}/edit`
      },
      {
        key: 'delete',
        icon: 'bin',
        tooltip: 'Delete',
        type: 'text',
        danger: true,
        onClick: (record) => remove(record.id)
      }
    ]
  }}
/>