import { Component } from 'vue';

declare interface CloseArgs {
    index?: number;
    name?: string;
}

export declare interface Modal<TAttributes = Record<string, unknown>> {
    /**
     * Import the modal that you want to use in your component,
     * then pass that to the composable
     */
    component: Component;
    /**
     * Optional identifier used to close a modal. The default value is `component.name` (if defined).
     */
    name?: string;
    /**
     * Props and listeners to passed through.
     *
     * Listeners need to be formatted as `onEventName`
     */
    attributes?: ToRecord<TAttributes>;
    /**
     * Dyanmic slots that you want rendered in the format of
     * { default: 'my slot content' }
     *
     * The Modals component which renders this list passes the value for slots through
     * a html sanitizer to avoid XSS attacks
     */
    slots?: Record<string, string>;
    /**
     * Custom options to use for the given modal.
     *
     * If options are not passed in, then useModals will set the following values as defaults
     *
     * {
     *  disableDefaultListeners: false
     * }
     */
    options?: {
        disableDefaultListeners?: boolean;
    };
}

declare type ToRecord<T> = {
    [P in keyof T]: T[P];
};

declare interface UseModals {
    active: Readonly<Modal[]>;
    current: Readonly<Modal | null>;
    open: <T>(modal: Modal<T>) => void;
    close: (args?: CloseArgs) => void;
    closeAll: () => void;
}

declare function useModals(): UseModals;
export default useModals;

export { }