import { type PropsWithChildren, type ReactNode } from 'react';

import { type StackProps } from '@mui/material';
import { type TablerIcon } from '@tabler/icons-react';

/** A single option rendered inside the kebab menu. */
export type SectionItemMenuOption = {
  /** Tabler icon component displayed to the left of the title. */
  Icon?: TablerIcon;
  /** Label shown in the menu row. */
  title: string;
  /** Fires when the option is clicked. */
  onClick: () => void;
  /** Greys out the option without removing it. */
  disabled?: boolean;
};

/** Props for the generic, fully-controlled collapsible section item. */
export type SectionItemProps = PropsWithChildren<
  Omit<StackProps, 'onClick' | 'draggable'> & {
    /** Text displayed in the header. */
    title: string;

    /** Whether the collapsible body is open. */
    expanded: boolean;
    /** Highlights the item with a brand-coloured border. */
    isSelected?: boolean;
    /** Shows error styling (border + title colour) when `true`. */
    hasError?: boolean;
    /** Tooltip text shown on hover when `hasError` is `true`. */
    errorTooltip?: string;

    /**
     * Fires when the expand/collapse chevron is clicked.
     * Does NOT fire when the section body is clicked.
     */
    onToggleExpand: (event: React.MouseEvent, isExpanded: boolean) => void;
    /**
     * Fires when the section header (excluding chevron and menu) is clicked.
     * Typically used for selection.
     */
    onClick?: React.MouseEventHandler<HTMLDivElement>;

    /** Generic menu options rendered in the kebab menu. */
    menuOptions?: SectionItemMenuOption[];

    /** Content rendered below `children` (preceded by a `Divider`). */
    footer?: ReactNode;

    /** Enables the drag grip icon and `useSortable` behaviour. Requires a parent `DndContext` + `SortableContext`. */
    draggable?: boolean;
    /** Sortable identifier (required when `draggable` is `true`). */
    dragId?: string;
    /** Arbitrary data forwarded to `useSortable`. */
    dragData?: Record<string, unknown>;

    /** Overrides the default background colour of the section card. */
    backgroundColor?: string;
    /** When `true`, renders a neutral border even when the item is not selected or in error. @default false */
    hasDefaultBorder?: boolean;
  }
>;
