import * as React from 'react';
import { TfelaMProps } from '@cloudflare/types';
import { TElementPropsWithBreakPoints } from '@cloudflare/elements';

export type TTableType = 'default' | 'info' | 'success' | 'warning' | 'error';
export type TTableAccent =
  | false
  | 'gray'
  | 'orange'
  | 'pink'
  | 'red'
  | 'green'
  | 'purple';

export interface IBaseTableProps {
  children?: React.ReactNode;
  loading?: boolean;
  className?: string;
  innerRef?: React.Ref<HTMLElement>;
}

export interface ITableProps extends IBaseTableProps {
  striped?: boolean;
  hover?: boolean;
  bordered?: boolean;
  condensed?: boolean;
  fixedLayout?: boolean;
  empty?: boolean;
  className?: string;
  loading?: boolean;
  errored?: boolean;
  noItemsNode?: React.ReactNode;
  noItemsMatchingSearchNode?: any;
  errorNode?: any;
  searching?: boolean;
  translations?: any;
  renderTableToDom?: boolean;
  fontWeight?: string;
  role?: 'table' | 'presentation';
}

export interface ITableCellProps extends IBaseTableProps {
  id?: string;
  align?: 'left' | 'center' | 'right';
  verticalAlign?: string;
  children?: React.ReactNode;
  className?: string;
  colSpan?: number;
  hideOnMobile?: boolean;
  hover?: boolean;
  textEllipsis?: boolean;
  overflowWrap?: 'normal' | 'break-word' | 'anywhere';
  onBlur?: () => void;
  onClick?: (...args: any[]) => void;
  onFocus?: () => void;
  onMouseLeave?: () => void;
  onMouseOver?: () => void;
}

export interface ITableRowProps extends IBaseTableProps {
  type?: TTableType;
  accent?: TTableAccent;
  active?: boolean;
  children?: React.ReactNode;
  onClick?: (...args: any[]) => void;
  hover?: boolean;
  separator?: boolean;
  testId?: string;
}

export class Table extends React.Component<ITableProps & TfelaMProps> {}
export class TableBody extends React.Component<IBaseTableProps> {}
export class TableCell extends React.Component<
  ITableCellProps & ITableProps & TElementPropsWithBreakPoints
> {}
export class TableFoot extends React.Component<IBaseTableProps & ITableProps> {}
export class TableHead extends React.Component<IBaseTableProps & ITableProps> {}
export class TableRow extends React.Component<
  ITableRowProps & ITableProps & React.TableHTMLAttributes<HTMLTableRowElement>
> {}