import type {
    ComponentType,
    ReactNode
} from "react";
import type {
    ImageProps,
    StyleProp,
    ViewStyle
} from "react-native";
import type {
    NCoreUIKitIcon
} from "../../types";
import type IModalProps from "../modal/type";
import type IRowCardProps from "../rowCard/type";
import type ISeperatorProps from "../seperator/type";
import type ISiteLogoProps from "../siteLogo/type";

export type IMenuRef = {
    close: () => void;
    open: () => void;
};

export type MenuDynamicStyle = {
    customBackgroundColorKey?: keyof NCoreUIKit.ProjectColorPalette;
    spaces: NCoreUIKit.ActivePalette["spaces"];
    colors: NCoreUIKit.ActivePalette["colors"];
    customBackgroundColor?: string;
    glassEffect?: number;
};

export type MenuLogoType = {
    image?: () => ComponentType<ImageProps>;
    imageUrl?: string;
    title?: string;
};

export type MenuButton = {
    title: keyof NCoreUIKit.Translation | (string & {});
    isShowRedirectIcon?: NCoreUIKitIcon;
    subButtons?: Array<MenuButton>;
    isCollapsible?: boolean;
    isUseLocalize?: boolean;
    redirectMain?: string;
    props?: IRowCardProps;
    icon?: NCoreUIKitIcon;
    redirectSub?: string;
    isCollapse?: boolean;
};

interface IMenuProps {
    customBackgroundColorKey?: keyof NCoreUIKit.ProjectColorPalette;
    style?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
    customTheme?: {
        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
        sharpness?: keyof NCoreUIKit.SharpnessKey;
        paletteKey?: keyof NCoreUIKit.PaletteKey;
        themeKey?: keyof NCoreUIKit.ThemeKey;
    };
    customLocalize?: {
        activeLocale?: keyof NCoreUIKit.LocaleKey;
    };
    renderHeaderSeperator?: () => ReactNode;
    navigation: NCoreUIKit.Navigation;
    isWorkWithSafeAreaView?: boolean;
    seperatorProps?: ISeperatorProps;
    renderSiteLogo?: () => ReactNode;
    customBackgroundColor?: string;
    isAutoClosedOnClosed?: boolean;
    siteLogoProps?: ISiteLogoProps;
    renderHeader?: () => ReactNode;
    renderFooter?: () => ReactNode;
    isWorkWithAnimation?: boolean;
    isShowCollabsButton?: boolean;
    isWorkWithPortal?: boolean;
    buttons: Array<MenuButton>;
    isWorkWithModal?: boolean;
    modalProps?: IModalProps;
    isCollapsible?: boolean;
    isAutoClosed?: boolean;
    glassEffect?: number;
    isCollapse?: boolean;
    onOpened?: (props: {
        id?: string
    }) => void;
    onClosed?: (props: {
        id?: string
    }) => void;
    portalName?: string;
    logo?: MenuLogoType;
    onClose?: (props: {
        id?: string
    }) => void;
    close?: () => void;
    onOpen?: (props: {
        id?: string
    }) => void;
    id: string;
};

export type {
    IMenuProps as default
};
