import { DOMMotionComponents } from 'motion/react';
import { ElementType, ReactNode } from 'react';
import { Interpolation } from '@nex-ui/system';
import { ClassValue } from 'clsx';
import { ModalProps } from '../modal/types.js';
import { DrawerContentVariants } from '../../theme/recipes/drawer.js';
import { OverrideProps, ComponentSlotClasses, HTMLMotionProps, ComponentPropsWithCommonProps } from '../../types/utils.js';

type DrawerSlotProps = {
    backdrop?: ComponentPropsWithCommonProps<'div'>;
};
type DrawerOwnProps<RootComponent extends ElementType> = {
    /**
     * The component or element to render as the root.
     *
     * @default 'div'
     */
    as?: RootComponent;
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: Interpolation;
    /**
     * The content of the drawer. It's usually the `DrawerContent` component.
     */
    children?: ReactNode;
    /**
     * Additional class names to apply to the root.
     */
    className?: ClassValue;
    /**
     * If true, the backdrop is not rendered.
     * @default false
     */
    hideBackdrop?: boolean;
    /**
     * The props used for each slot.
     */
    slotProps?: DrawerSlotProps;
    /**
     * The className used for each slot.
     */
    classNames?: ComponentSlotClasses<keyof DrawerSlotProps>;
    /**
     * If true, closes the drawer when the backdrop is clicked.
     * @default true
     */
    closeOnInteractBackdrop?: boolean;
} & Omit<ModalProps, 'closeOnInteractOutside'>;
interface DrawerPropsOverrides {
}
type DrawerProps<RootComponent extends ElementType = DOMMotionComponents['div']> = OverrideProps<RootComponent, DrawerOwnProps<RootComponent>, DrawerPropsOverrides>;
type DrawerContentSlotProps = {
    closeButton?: ComponentPropsWithCommonProps<'button'>;
    paper?: ComponentPropsWithCommonProps<DOMMotionComponents['section']>;
};
interface DrawerContentPropsOverrides {
}
type DrawerContentOwnProps<RootComponent extends ElementType = 'div'> = {
    /**
     * The component or element to render as the root.
     * @default 'div'
     */
    as?: RootComponent;
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: Interpolation;
    /**
     * Additional class names to apply to the root.
     */
    className?: ClassValue;
    /**
     * The className used for each slot.
     */
    classNames?: ComponentSlotClasses<'paper' | 'closeButton'>;
    /**
     * It's usually the DrawerHeader、DrawerBody andd DrawerFooter component.
     */
    children?: ReactNode;
    /**
     * The props used for each slot.
     */
    slotProps?: DrawerContentSlotProps;
    /**
     * Custom close button to display on top right corner.
     */
    closeIcon?: ReactNode;
    /**
     * If true, the close button is not rendered.
     * @default false
     */
    hideCloseButton?: boolean;
    /**
     * The size of the drawer.
     * @default 'md'
     */
    size?: DrawerContentVariants['size'];
    /**
     * The placement of the drawer.
     * @default 'right'
     */
    placement?: DrawerContentVariants['placement'];
    /**
     * The props to modify the framer motion animation.
     * Use the `variants` API to create your own animation.
     */
    motionProps?: HTMLMotionProps<'div'> | ((placement: DrawerContentVariants['placement']) => HTMLMotionProps<'div'>);
    /**
     * The id(s) of the element(s) that label the drawer.
     */
    'aria-labelledby'?: string;
    /**
     * The id(s) of the element(s) that describe the drawer.
     */
    'aria-describedby'?: string;
};
type DrawerContentProps<RootComponent extends ElementType = 'div'> = OverrideProps<RootComponent, DrawerContentOwnProps<RootComponent>, DrawerContentPropsOverrides>;
interface DrawerHeaderPropsOverrides {
}
type DrawerHeaderOwnProps<RootComponent extends ElementType> = {
    /**
     * The component or element to render as the root.
     * @default 'h2'
     */
    as?: RootComponent;
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: Interpolation;
    /**
     * The content of the drawer header.
     */
    children?: ReactNode;
    /**
     * Additional class names to apply to the root.
     */
    className?: ClassValue;
};
type DrawerHeaderProps<RootComponent extends ElementType = 'h2'> = OverrideProps<RootComponent, DrawerHeaderOwnProps<RootComponent>, DrawerHeaderPropsOverrides>;
interface DrawerBodyPropsOverrides {
}
type DrawerBodyOwnProps<RootComponent extends ElementType> = {
    /**
     * The component or element to render as the root.
     * @default 'div'
     */
    as?: RootComponent;
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: Interpolation;
    /**
     * The content of the drawer body.
     */
    children?: ReactNode;
    /**
     * Additional class names to apply to the root.
     */
    className?: ClassValue;
};
type DrawerBodyProps<RootComponent extends ElementType = 'div'> = OverrideProps<RootComponent, DrawerBodyOwnProps<RootComponent>, DrawerBodyPropsOverrides>;
interface DrawerFooterPropsOverrides {
}
type DrawerFooterOwnProps<RootComponent extends ElementType> = {
    /**
     * The component or element to render as the root.
     * @default 'div'
     */
    as?: RootComponent;
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: Interpolation;
    /**
     * The content of the drawer footer.
     */
    children?: ReactNode;
    /**
     * Additional class names to apply to the root.
     */
    className?: ClassValue;
};
type DrawerFooterProps<RootComponent extends ElementType = 'div'> = OverrideProps<RootComponent, DrawerFooterOwnProps<RootComponent>, DrawerFooterPropsOverrides>;

export type { DrawerBodyProps, DrawerBodyPropsOverrides, DrawerContentProps, DrawerContentPropsOverrides, DrawerFooterProps, DrawerFooterPropsOverrides, DrawerHeaderProps, DrawerHeaderPropsOverrides, DrawerProps, DrawerPropsOverrides };