import { Color, ExtendedCSSProperties } from '../../Common';
import { BaseTheme, BaseThemeOptions, PhoneNumberCountryCodes, SocialLoginsThemeOptions } from '../index';
import { ButtonThemeOptions, CustomComponent, ILogosComponent, InputThemeOptions, ITestimonialComponent, SideElement } from '../ComponentsOptions';
/**
 *   @RootElement
 *   - @WrapperElement
 *   | - Header
 *   | - Box
 *   |  | - Header
 *   |  | - Content
 *   |  | - SocialLogin
 *   |  |  | - Divider
 *   |  |  | - Google
 *   |  |  | - Microsoft
 *   |  |  | - Footer
 *   |  | - Footer
 *   | - Footer
 */
interface LogoComponent {
    /**
     * Company logo Url or native html element as string
     */
    image?: string | any | CustomComponent;
    /**
     * Company logo placement in Login Pages
     * box = inside the login box element
     * page = displayed at the top of the page
     */
    placement?: 'box' | 'page';
    alignment?: 'left' | 'right' | 'center';
    /**
     *  Direct css styling for Company Logo container component
     */
    style?: ExtendedCSSProperties;
}
export interface PhoneNumberOptions {
    dropdownStyle?: ExtendedCSSProperties;
    searchBarStyle?: ExtendedCSSProperties;
    dropdownItemStyle?: ExtendedCSSProperties;
    selectArrowStyle?: ExtendedCSSProperties;
    selectDropdownButtonStyle?: ExtendedCSSProperties;
}
export interface PrestepOptions {
    enabled?: boolean;
}
export interface LayoutOptions {
    /**
     * Layout type for login box page, Default is Center login box elements
     * By choosing Side type you can provide HTML element for the other
     * side, floating right will display login box at the right element
     * with default width equal to 50% of the window width
     */
    type?: 'float-right' | 'center' | 'float-left';
    /**
     * splitSize is for the side element to setup how much % of the window side elements wi'll take
     * default is 50 = 50%;
     */
    splitSize?: number;
    /**
     * Will be displayed if type is 'float-right' or 'float-left',
     * Accepts:
     *  - html element as string
     *  - function that return html element as string
     *  - ReactElement will be rendered inside LoginBox VirtualTree
     */
    sideElement?: CustomComponent;
    sideElementStyle?: ExtendedCSSProperties;
    /**
     * Will be displayed if type is 'float-right' or 'float-left',
     * Accepts:
     *  - values, testimonials, titleDescription, logos
     * only two elements can be active together
     */
    splitModeElements?: {
        logos?: ILogosComponent;
        testimonials?: ITestimonialComponent;
        showDivider?: boolean;
        showTitleDivider?: boolean;
        activeElements?: {
            titleDescription?: boolean;
            element1: SideElement;
            element2?: SideElement;
        };
    };
    splitModeStyles?: {
        dividerStyle?: ExtendedCSSProperties;
        splitContainerStyle?: ExtendedCSSProperties;
        logos?: {
            logoStyle?: ExtendedCSSProperties;
            logosContainerStyle?: ExtendedCSSProperties;
        };
        values?: {
            valuesIconStyle?: ExtendedCSSProperties;
            valuesContainerStyle?: ExtendedCSSProperties;
            valuesTextStyle?: ExtendedCSSProperties;
        };
        testimonials?: {
            testimonialsContainerStyle?: ExtendedCSSProperties;
            testimonialsTitleStyle?: ExtendedCSSProperties;
            testtomonialsSubtitleStyle?: ExtendedCSSProperties;
            testimonialsTextStyle?: ExtendedCSSProperties;
            testimonialsQuotesStyle?: ExtendedCSSProperties;
            testimonialsIndicatorStyle?: ExtendedCSSProperties;
            testimonialsActiveIndicatorStyle?: ExtendedCSSProperties;
            testimonialsIndicatorContainerStyle?: ExtendedCSSProperties;
        };
        titleDescription?: {
            titleDescriptionContainerStyle?: ExtendedCSSProperties;
            titleDescriptionTitleStyle?: ExtendedCSSProperties;
            titleDescriptionCompanyNameStyle?: ExtendedCSSProperties;
            titleDescriptionDescriptionStyle?: ExtendedCSSProperties;
        };
    };
}
interface LoginBoxOptionalCommon {
    /**
     * Update document title when mounting authentication page
     */
    docTitle?: string;
    /**
     * Options to specify the login box page structure
     * Ex. split screen and display login in the left/right side
     */
    layout?: LayoutOptions;
    /**
     * Header component placed in before section content.
     * Mostly used for Company Logo or Page title
     * Accepts:
     *  - string as url for rendering image element with src='url'
     *  - string as base64 for rendering image as base64 content
     *  - ReactElement will be rendered inside LoginBox VirtualTree
     */
    pageHeader?: CustomComponent;
    /**
     * Footer component placed in before section content
     * Mostly used for Disclaimers or Back buttons
     * Accepts:
     *  - string as url for rendering image element with src='url'
     *  - string as base64 for rendering image as base64 content
     *  - ReactElement will be rendered inside LoginBox VirtualTree
     */
    pageFooter?: CustomComponent;
    /**
     * Company logo Url or native html element as string
     */
    logo?: LogoComponent;
    /**
     * Powered by frontegg placement
     * box = inside the login box element
     * page = displayed at the bottom of the page
     */
    poweredByPlacement?: 'box' | 'page' | 'leftBottomCorner';
    /**
     * Powered by frontegg color
     */
    poweredByColor?: Color;
    /**
     * BoxElement
     * It is a Card component placed inside the [WrapperElement]{@link pageStyle}
     * The purpose of this element is to contain page field
     * By default it's have flex display and justify content center
     */
    boxStyle?: ExtendedCSSProperties;
    /**
     * Header component placed in inside the login box and before login inputs.
     * Accepts:
     *  - string as url for rendering image element with src='url'
     *  - string as base64 for rendering image as base64 content
     *  - ReactElement will be rendered inside LoginBox VirtualTree
     */
    boxHeader?: CustomComponent;
    /**
     * Direct css styling for applying css for all (Box title) in LoginBox pages
     */
    boxTitleStyle?: ExtendedCSSProperties;
    /**
     * Direct css styling for applying css for all (Box message or Box subtitle) in LoginBox pages
     */
    boxMessageStyle?: ExtendedCSSProperties;
    /**
     * Footer component placed in inside the login box and after login inputs.
     * Mostly used for Disclaimers or Back buttons
     * Accepts:
     *  - string as url for rendering image element with src='url'
     *  - string as base64 for rendering image as base64 content
     *  - ReactElement will be rendered inside LoginBox VirtualTree
     */
    boxFooter?: CustomComponent;
    /**
     * Option to customize phone number select by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    phoneNumberSelect?: PhoneNumberOptions;
    /**
     * Use this option to determine which countries will be displayed or blocked in the phone number field in the signup form
     * Default is all countries allowed
     */
    phoneNumberCountryCodes?: PhoneNumberCountryCodes;
    /**
     * Option to customize login box inputs by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    inputTheme?: InputThemeOptions;
    /**
     * Option to customize login box standard buttons by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    buttonTheme?: ButtonThemeOptions;
    /**
     * Option to customize login box link buttons by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    linkButtonTheme?: ButtonThemeOptions;
    /**
     * Option to customize login box submit buttons by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    submitButtonTheme?: ButtonThemeOptions;
    /**
     * Option to customize login box passkeys button by providing layous options
     */
    passkeysButtonTheme?: Omit<ButtonThemeOptions, 'disabled'>;
    /**
     * Option to customize login box social logins buttons by providing
     * layous options for every button and element
     */
    socialLogins?: SocialLoginsThemeOptions;
    /**
     * Option to customize login box back to login button by providing
     * css style for every state (base, hover, focus, disabled, etc...)
     */
    backToLoginStyle?: ExtendedCSSProperties;
    /**
     * Option to customize login box forget password buttons by providing
     * css style
     */
    forgotPasswordButton?: ExtendedCSSProperties;
    /**
     * Option to add a confirmation mechanism component to relevant flows
     * that rely on email links
     */
    prestep?: PrestepOptions;
}
export interface LoginBoxCommonTheme extends BaseTheme, LoginBoxOptionalCommon {
    /**
     * RootElement
     * The root DIV element of specific login box page
     * By default it's have fixed and full width/height size
     */
    rootStyle: ExtendedCSSProperties;
    /**
     * PageElement
     * It is DIV element placed inside the [RootElement]{@link rootStyle}
     * The purpose of this element is to wrapper the Box Component and other custom components
     * By default it's have flex display and justify content center
     */
    pageStyle: ExtendedCSSProperties;
}
export interface LoginBoxCommonThemeOptions extends BaseThemeOptions, LoginBoxOptionalCommon {
    /**
     * RootElement
     * The root DIV element of specific login box page
     * By default it's have fixed and full width/height size
     */
    rootStyle?: ExtendedCSSProperties;
    /**
     * PageElement
     * It is DIV element placed inside the [RootElement]{@link rootStyle}
     * The purpose of this element is to wrapper the Box Component and other custom components
     * By default it's have flex display and justify content center
     */
    pageStyle?: ExtendedCSSProperties;
}
export {};