import type { ReactElement, ReactNode } from "react";
import { classNames } from "./class-names.js";

/**
 * Table and list primitives.
 *
 * These are primitives rather than a data grid on purpose: sorting, filtering, pagination, selection
 * models, and virtualisation are product decisions a module owns, and a "smart" table forces every
 * consumer into one answer for all of them. What the platform owns is that two modules' tables look
 * and behave like one product.
 */

export interface TableProps {
  /** Names the table for assistive technology when no visible caption is rendered. */
  readonly label: string;
  readonly className?: string;
  readonly children?: ReactNode;
}

export function Table(props: TableProps): ReactElement {
  return (
    <table aria-label={props.label} className={classNames("ek-table", props.className)}>
      {props.children}
    </table>
  );
}

export interface TableSectionProps {
  readonly children?: ReactNode;
}

export function TableHead(props: TableSectionProps): ReactElement {
  return <thead>{props.children}</thead>;
}

export function TableBody(props: TableSectionProps): ReactElement {
  return <tbody>{props.children}</tbody>;
}

export interface TableRowProps {
  readonly selected?: boolean;
  readonly children?: ReactNode;
}

export function TableRow(props: TableRowProps): ReactElement {
  return (
    <tr {...(props.selected === undefined ? {} : { "aria-selected": props.selected })}>
      {props.children}
    </tr>
  );
}

export interface TableCellProps {
  readonly header?: boolean;
  /** `col` for a column header, `row` for a row header. Ignored unless `header` is set. */
  readonly scope?: "col" | "row";
  readonly children?: ReactNode;
}

export function TableCell(props: TableCellProps): ReactElement {
  if (props.header === true) {
    return <th scope={props.scope ?? "col"}>{props.children}</th>;
  }
  return <td>{props.children}</td>;
}

export interface ListProps {
  readonly label?: string;
  readonly className?: string;
  readonly children?: ReactNode;
}

export function List(props: ListProps): ReactElement {
  return (
    <ul
      {...(props.label === undefined ? {} : { "aria-label": props.label })}
      className={classNames("ek-list", props.className)}
    >
      {props.children}
    </ul>
  );
}

export interface ListItemProps {
  readonly className?: string;
  readonly children?: ReactNode;
}

export function ListItem(props: ListItemProps): ReactElement {
  return <li className={classNames("ek-list__item", props.className)}>{props.children}</li>;
}