import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { type SidePaneSlotRecipeVariant } from '../../styled-system/recipes';
import { type FormFooterProps } from '../FormFooter';
export type OnCloseFunction = () => void;
export type SidePaneRenderOptions = {
    /**
     * The original heading element wrapped in <h2> tag.
     * This ensures proper semantic HTML structure and accessibility.
     */
    headingNode: ReactNode;
};
/**
 * SidePaneProps is a type that defines the properties for the SidePane component.
 *
 * It includes:
 * - `title`: The heading title of the dialog.
 * - `isOpen` and `onClose`: These props are conditionally required based on whether the component is controlled or uncontrolled.
 *   - If `isOpen` is defined, `onClose` is required (controlled component).
 *   - If `isOpen` is undefined, `onClose` is optional (uncontrolled component).
 * - Additional props from `ComponentPropsWithoutRef<'div'>` are also included.
 */
export type SidePaneProps = {
    /**
     * The main content of the side pane.
     */
    children?: ReactNode;
    /**
     * The heading title of the dialog.
     */
    title?: string;
    /**
     * Custom render function for the heading area.
     * Provides the original headingNode wrapped in <h2> tag for flexible layout composition.
     * When provided, this takes precedence over the default title rendering.
     *
     * @param options - Contains the headingNode for layout composition
     *
     * @returns ReactNode - Custom layout containing the headingNode
     *
     * @example
     * ```tsx
     * <SidePane
     *   title="Settings"
     *   renderHeading={({ headingNode }) => (
     *     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
     *       <SettingsIcon />
     *       {headingNode}
     *     </div>
     *   )}
     * />
     * ```
     */
    renderHeading?: (options: SidePaneRenderOptions) => ReactNode;
    /**
     * ReactNode which will be displayed on the right of the SidePane and on the left of Close Icon of the SidePane.
     * Usually, we leave Buttons there
     *
     * @default undefined
     */
    actionSlot?: ReactNode;
    /**
     * The position of the side pane.
     * This prop is optional. We only support two positions: 'left' and 'right'
     *
     * @default 'right'
     */
    position?: SidePaneSlotRecipeVariant['position'];
    /**
     * The properties for the close button.
     * If this prop is not passed, the default values for each property will be applied.
     *
     * @property aria-label - The alternative text for the close button. default is '閉じる'.
     *
     * @property isCollapseIcon - Whether the close button displays a collapse icon instead of Close (X) icon.
     *   If true, shows PaneExpansionToRight (>>) icon when position is 'right',
     *   or PaneExpansionToLeft (<<) icon when position is 'left'.
     *   default is false.
     */
    closeButtonProps?: {
        isCollapseIcon?: boolean;
    } & Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
    /**
     * The DOM node where the side pane should be rendered.
     *
     * If provided, the pane is rendered inside this node. Otherwise, a suitable DOM
     * node is chosen automatically.
     *
     * @default undefined
     */
    targetDOMNode?: HTMLElement | null;
    /**
     * Enable modal mode of the SidePane. When set to true,
     * the SidePane will render the backdrop and interaction
     * with the underlying UI will be blocked.
     *
     * @default false
     */
    enableModal?: boolean;
    /**
     * Disables closing the side pane when clicking on the backdrop (modal mode only).
     * When true, the side pane can only be closed via buttons or the close button.
     *
     * @default false
     */
    disableBackdropClose?: boolean;
    /**
     * Enable auto unmounting of the side pane content when it's not displayed.
     * When true, the side pane content will return null instead of hiding via CSS.
     *
     * @default true
     */
    enableAutoUnmount?: boolean;
    /**
     * Props to render a `FormFooter` inside the SidePane.
     *
     * - `position: 'sticky'` (default): the footer is always pinned to the pane bottom, outside the scrollable content area.
     * - `position: 'stacking'`: the footer flows after the content inside the scroll area.
     *
     * @default undefined
     */
    formFooterProps?: Pick<FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
        position?: FormFooterProps['position'];
    };
    /**
     * Additional props to apply to the inside container element of the SidePane.
     * This element wraps the header and content sections.
     *
     * @default undefined
     */
    insideProps?: {
        /**
         * Additional class name to apply to the inside container element.
         */
        className?: string;
    };
    /**
     * Whether the side pane is shown or not.
     * This prop is required when using the side pane as a controlled component.
     */
    open?: boolean;
    /**
     * The handler to close the side pane.
     * This prop is required when using the side pane as a controlled component.
     */
    onClose?: OnCloseFunction;
} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;