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

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

export type EmbeddedMenuDynamicStyle = {
    spaces: NCoreUIKit.ActivePalette["spaces"];
    colors: NCoreUIKit.ActivePalette["colors"];
    isCollapse: boolean;
};

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

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

interface IEmbeddedMenuProps {
    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;
    buttons: Array<EmbeddedMenuButton>;
    navigation: NCoreUIKit.Navigation;
    isWorkWithSafeAreaView?: boolean;
    isWorkWithHeaderSpace?: boolean;
    isAutoClosedOnClosed?: boolean;
    siteLogoProps?: ISiteLogoProps;
    isWorkWithAnimation?: boolean;
    isShowCollabsButton?: boolean;
    logo?: EmbeddedMenuLogoType;
    renderSiteLogo?: (props: {
        isActive: boolean;
    }) => ReactNode;
    isShowSiteLogo?: boolean;
    renderHeader?: (props: {
        isCollapse: boolean;
        maxWidth: number;
        minWidth: number;
    }) => ReactNode;
    renderFooter?: (props: {
        isCollapse: boolean;
        maxWidth: number;
        minWidth: number;
    }) => ReactNode;
    isCollapsible?: boolean;
    isAutoClosed?: boolean;
    isCollapse?: boolean;
    headerSpace?: number;
    onOpened?: (props: {
        id?: string
    }) => void;
    onClosed?: (props: {
        id?: string
    }) => void;
    onClose?: (props: {
        id?: string
    }) => void;
    close?: () => void;
    onOpen?: (props: {
        id?: string
    }) => void;
    maxWidth?: number;
    minWidth?: number;
    id: string;
};

export type {
    IEmbeddedMenuProps as default
};
