import { BaseObject } from 'styled-components/dist/types';
import { ButtonHTMLAttributes } from 'react';
import { ClipboardEventHandler } from 'react';
import { Component } from 'react';
import { CSSObject } from 'styled-components';
import { CSSProperties } from 'react';
import { default as default_2 } from 'react';
import { DefaultTheme } from 'styled-components';
import { DetailedHTMLProps } from 'react';
import { FC } from 'react';
import { FocusEvent as FocusEvent_2 } from 'react';
import { FocusEventHandler } from 'react';
import { ForwardRefComponent } from 'framer-motion';
import { HTMLAttributes } from 'react';
import { HTMLInputAutoCompleteAttribute } from 'react';
import { HTMLInputTypeAttribute } from 'react';
import { HTMLMotionProps } from 'framer-motion';
import { IStyledComponentBase } from 'styled-components/dist/types';
import { JSX } from 'react/jsx-runtime';
import { KeyboardEventHandler } from 'react';
import { NumberFormatValues } from 'react-number-format';
import { NumericFormatProps } from 'react-number-format';
import { PatternFormatProps } from 'react-number-format';
import { PropsWithChildren } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import { RuleSet } from 'styled-components';
import { Substitute } from 'styled-components/dist/types';

export declare const addDateDropdownDaySize: RuleSet<DateDropdownDayProps>;

export declare const addDateInputButtonClearSize: RuleSet<ButtonProps>;

export declare const addDateInputButtonSize: RuleSet<ButtonProps>;

/****************************************** Size *************************************************/
export declare const addDateInputWrapperSize: RuleSet<AddDollarSign_2<Pick<DatePickerProps, "size" | "font" | "isDisabled" | "error" | "isReadOnly" | "isDisabledOutline" | "isOutlineBoxShadow" | "genre" | "isBold"> & {
isOpen?: boolean;
isActive?: boolean;
isHaveValue?: boolean;
isShowPlaceholder?: boolean;
}>>;

declare type AddDollarSign<T> = {
    [K in keyof T as `$${string & K}`]: T[K];
};

declare type AddDollarSign_2<T> = {
    [K in keyof T as `$${string & K}`]: T[K];
};

declare interface addErrorProps {
    error?: ErrorMessageProps;
}

declare type addFontProps = {
    font?: FontSizeStylesProps;
};

declare type addIconProps = {
    [T in keyof DefaultTheme['icon']['map']]: Omit<IconItemProps, 'size'> & {
        type: T;
        name: DefaultTheme['icon']['map'][T][number];
        isHidden?: boolean;
        size?: IconItemProps['size'];
    };
}[keyof DefaultTheme['icon']['map']];

declare type addOutlineProps = {
    isReadOnly?: boolean;
    isDisabledOutline?: boolean;
    isOutlineBoxShadow?: boolean;
};

declare type addOutlinePropsDollar = AddDollarSign<addOutlineProps>;

declare interface addSXProps {
    sx?: SXProps;
}

declare type addSXTypographyProps = {
    sxTypography?: TypographySXProps;
};

declare type BaseInputProps = CommonInputProps & (ControlledValue | UncontrolledValue);

declare type ButtonProps = ButtonPropsStandard | ButtonPropsIconGroup;

declare type ButtonPropsDefault = PropsWithChildren & {
    size: IThemeSize;
    genre: TButtonGenre;
    id?: string;
    tabIndex?: number;
    ref?: Ref<HTMLElement | null>;
    className?: string;
    icons?: addIconProps[];
    isDisabled?: boolean;
    isDisabledRipple?: boolean;
    isHidden?: boolean;
    isOnlyIcon?: boolean;
    isWhileTapEffect?: boolean;
    isWidthAsHeight?: boolean;
    isMinWidthAsContent?: boolean;
    isRadius?: boolean;
    isHiddenBorder?: boolean;
    isPlaystationEffect?: boolean;
    isNotHoverEffect?: boolean;
    isFullSize?: boolean;
    onFocus?: (event: default_2.FocusEvent<HTMLButtonElement, Element>) => void;
    onClick?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    onMouseDown?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    type?: 'button' | 'submit' | 'reset';
} & addSXProps & addFontProps & addOutlineProps & addSXTypographyProps;

declare type ButtonPropsIconGroup = ButtonPropsDefault & {
    isIconGroup?: true;
    iconGroupOrder?: number;
};

declare type ButtonPropsStandard = ButtonPropsDefault & {
    isIconGroup?: false;
};

export declare type CommonDatePickerProps = addErrorProps & addSXProps & addFontProps & addOutlineProps & {
    genre: TDateGenre;
    id?: string;
    isDisabled?: boolean;
    isBold?: boolean;
    isMinWidth?: boolean;
    isShowClearButton?: boolean;
    isInputEffect?: InputStandardProps['isInputEffect'];
    isOnClickClose?: boolean;
    labelPlaceholder?: string;
    locale: {
        months: SelectMonthProps['monthsLocale'];
        weeks: WeekItem[];
        inputs: InputItem;
    };
    notValidDate?: Omit<ErrorMessageProps, 'size' | 'isError'>;
    mode?: DatePickerMode;
    type?: DatePickerType;
    name?: string;
    ariaLabel?: string;
    autoComplete?: HTMLInputAutoCompleteAttribute | string;
    onBlur?: () => void;
    onChange: (timestamp: number | null) => void;
    onFocus?: () => void;
    size: IThemeSize;
    dateMax?: number;
    dateMin?: number;
    dateDefault: number;
};

declare type CommonInputProps = addErrorProps & addFontProps & addOutlineProps & addSXProps & {
    ref?: Ref<HTMLInputElement | null>;
    name?: string;
    ariaLabel?: string;
    id?: string;
    className?: string;
    isNotShowHoverStyle?: boolean;
    autoComplete?: HTMLInputAutoCompleteAttribute | string;
    isAllowEmptyFormatting?: boolean;
    genre: TInputGenre;
    size: IThemeSize;
    tabIndex?: number;
    isWidthAsHeight?: boolean;
    isNiceNumber?: boolean;
    isDisabled?: boolean;
    isLoading?: boolean;
    isInputEffect?: boolean;
    isRequired?: boolean;
    isCenter?: boolean;
    isNoSpaces?: boolean;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onPaste?: ClipboardEventHandler<HTMLInputElement>;
    onFocus?: FocusEventHandler<HTMLInputElement>;
    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
    placeholder?: string;
    isBold?: boolean;
    postfixChildren?: InputChildrenProps;
    prefixChildren?: InputChildrenProps;
    inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
    maxLength?: number;
    minLength?: number;
};

declare type ControlledValue = {
    value: string | number | null | undefined;
    defaultValue?: never;
};

declare type ControlledValue_2 = {
    value: number | null | undefined;
    defaultValue?: never;
};

export declare interface DateDayProps {
    dayOfWeek: number;
    isCurrentMonth: boolean;
    isDisabled: boolean;
    isToday: boolean;
    isWeekend: boolean;
    labelNumber: number;
    labelString: string;
    value: number;
    weekOfMonth: number;
}

export declare const DateDropdownDay: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DateDropdownDayProps>> & string;

export declare const DateDropdownDayOfWeek: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DateDropdownDayProps>> & string;

export declare type DateDropdownDayProps = AddDollarSign<Pick<DatePickerProps, 'genre' | 'size' | 'font'> & Pick<DateDayProps, 'isToday' | 'isWeekend'> & {
    row: number;
    column: number;
    isChoice?: boolean;
    isCurrentMonth?: boolean;
    isDisabled?: boolean;
}> & addOutlinePropsDollar;

export declare const DateDropdownDays: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
$rows: number;
}>> & string;

export declare const DateDropdownList: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<DatePickerProps, "isInputEffect"> & Pick<DatePickerProps, "size" | "genre">>>> & string;

export declare const DateDropdownListParent: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"div">, "ref"> & RefAttributes<HTMLDivElement>, AddDollarSign_2<Pick<InputStandardProps, "size" | "genre">>>> & string & Omit<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, keyof Component<any, {}, any>>;

export declare type DateDropdownListProps = AddDollarSign<Pick<DatePickerProps, 'isInputEffect'> & Pick<DatePickerProps, 'genre' | 'size'>>;

export declare const DateInput: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<DatePickerProps, "size" | "font" | "isDisabled" | "error" | "isReadOnly" | "isDisabledOutline" | "isOutlineBoxShadow" | "genre" | "isBold"> & {
isOpen?: boolean;
isActive?: boolean;
isHaveValue?: boolean;
isShowPlaceholder?: boolean;
}>>> & string;

export declare const DateInputButton: IStyledComponentBase<"web", Substitute<ButtonProps & BaseObject, BaseObject>> & string & Omit<FC<ButtonProps>, keyof Component<any, {}, any>>;

export declare const DateInputButtonClear: IStyledComponentBase<"web", Substitute<ButtonProps & BaseObject, BaseObject>> & string & Omit<FC<ButtonProps>, keyof Component<any, {}, any>>;

export declare type DateInputProps = AddDollarSign<Pick<DatePickerProps, 'error' | 'genre' | 'size' | 'isBold' | 'isReadOnly' | 'isDisabledOutline' | 'isOutlineBoxShadow' | 'isDisabled' | 'font'> & {
    isOpen?: boolean;
    isActive?: boolean;
    isHaveValue?: boolean;
    isShowPlaceholder?: boolean;
}>;

export declare const DateInputWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<DatePickerProps, "size" | "font" | "isDisabled" | "error" | "isReadOnly" | "isDisabledOutline" | "isOutlineBoxShadow" | "genre" | "isBold"> & {
isOpen?: boolean;
isActive?: boolean;
isHaveValue?: boolean;
isShowPlaceholder?: boolean;
}>>> & string;

export declare const DatePicker: (props: DatePickerProps) => JSX.Element;

export declare type DatePickerMode = DatePickerVariant[];

export declare type DatePickerProps = CommonDatePickerProps & (ControlledValue_2 | UncontrolledValue_2);

export declare type DatePickerType = 'manual' | 'select' | 'manualAndSelect';

export declare enum DatePickerVariant {
    DD = "DD",
    MM = "MM",
    YYYY = "YYYY"
}

export declare type DateStyledListProps = AddDollarSign<Pick<InputStandardProps, 'genre' | 'size'>>;

export declare type DateStyledOptionProps = AddDollarSign<{
    isSelectedItem?: boolean;
    isCheckboxProps?: boolean;
}> & StyledInputProps;

export declare const DateWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DateWrapperProps>> & string;

export declare type DateWrapperProps = AddDollarSign<Pick<InputStandardProps, 'genre' | 'isDisabled'> & {
    parentListHeight: number;
    radius: number;
    isMinWidth?: boolean;
}> & StyledInputWrapperProps;

declare type ErrorMessageProps = {
    errorMessage?: string;
    isError?: boolean;
    isErrorAbsolute?: boolean;
    size?: IThemeSize;
    sx?: addSXProps['sx'];
} & addFontProps;

declare type FontSizeStylesProps = {
    size?: TypographyDataProps['size'];
    weight?: TypographyDataProps['weight'];
    family?: TypographyDataProps['family'];
    height?: TypographyDataProps['height'];
};

declare type IconItemProps = {
    [K in keyof DefaultTheme['icon']['map']]: {
        type: K;
        name: DefaultTheme['icon']['map'][K][number];
        className?: string;
        onClick?: (event: default_2.MouseEvent<SVGSVGElement>) => void;
        size: IThemeSize | '100%';
        color?: IThemePaletteKeys;
        turn?: number;
        order?: number;
        tabIndex?: number;
    } & addSXProps;
}[keyof DefaultTheme['icon']['map']];

declare interface InputChildrenProps extends PropsWithChildren {
    left: string;
    right: string;
    width: string;
}

export declare type InputItem = {
    day: string;
    month: string;
    year: string;
};

declare type InputNumericProps = BaseInputProps & {
    variety: 'numeric';
    onChange?: (value: NumberFormatValues) => void;
    propsNumeric: Pick<NumericFormatProps, 'allowLeadingZeros' | 'thousandSeparator' | 'allowNegative' | 'allowedDecimalSeparators' | 'decimalScale' | 'decimalSeparator' | 'fixedDecimalScale' | 'prefix' | 'thousandsGroupStyle' | 'isAllowed' | 'suffix'>;
};

declare type InputPatternProps = BaseInputProps & {
    variety: 'pattern';
    onChange?: (value: NumberFormatValues) => void;
    propsPattern: Pick<PatternFormatProps, 'format' | 'mask' | 'allowEmptyFormatting' | 'patternChar' | 'valueIsNumericString' | 'type'>;
};

declare type InputProps = InputStandardProps | InputPatternProps | InputNumericProps;

declare type InputStandardProps = BaseInputProps & {
    variety: 'standard';
    onChange?: (value: string) => void;
    type?: HTMLInputTypeAttribute;
    min?: number;
    max?: number;
    step?: number;
};

declare interface ISelectItem {
    [key: string]: unknown;
    isDisabled?: boolean;
    isLoading?: boolean;
    label: string | number | ReactNode;
    value: string | number;
}

declare type IThemeDevice = 'default' | 'tablet' | 'mobile';

declare type IThemeFontFamily = 'Inter' | 'Roboto' | 'Work Sans' | 'Roboto Mono' | 'Manrope';

declare type IThemeGenre = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'black' | 'blackBorder' | 'product' | 'productBorder' | 'white' | 'greenTransparent' | 'redTransparent' | 'yellowTransparent' | 'realebail-product' | 'realebail-gray' | 'realebail-white' | 'bustmarket-gray' | 'bustmarket-gray-violet' | 'bustmarket-violet' | 'bustmarket-white-violet'>, IThemeGenreTypeDefault>;

declare type IThemeGenreDate = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white'>, IThemeGenreTypeDate>;

declare type IThemeGenreInput = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white' | 'bustmarket-gray'>, IThemeGenreTypeDefault>;

declare type IThemeGenreName = 'gray' | 'grayBorder' | 'black' | 'blackBorder' | 'product' | 'productBorder' | 'white' | 'greenTransparent' | 'redTransparent' | 'yellowTransparent' | 'realebail-product' | 'realebail-gray' | 'realebail-white' | 'bustmarket-gray-violet' | 'bustmarket-gray' | 'bustmarket-violet' | 'bustmarket-white-violet';

declare type IThemeGenreSelect = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white'>, IThemeGenreTypeSelect>;

declare interface IThemeGenreTypeDate {
    background: {
        rest: string;
        hover: string;
        today: string;
        weekend: string;
        choice: string;
        line: string;
    };
    border: {
        rest: string;
        hover: string;
        today: string;
        weekend: string;
        choice: string;
        line: string;
    };
    color: {
        rest: string;
        hover: string;
        placeholder: string;
        today: string;
        weekend: string;
        choice: string;
        line: string;
    };
}

declare interface IThemeGenreTypeDefault {
    background: {
        rest: string;
        hover: string;
    };
    border: {
        rest: string;
        hover: string;
    };
    color: {
        rest: string;
        hover: string;
        placeholder: string;
    };
}

declare interface IThemeGenreTypeSelect {
    background: {
        rest: string;
        hover: string;
        select: string;
    };
    border: {
        rest: string;
        hover: string;
        select: string;
    };
    color: {
        rest: string;
        hover: string;
        select: string;
        placeholder: string;
    };
}

declare type IThemePaletteKeys = 'transparent' | 'black100' | 'black80' | 'black60' | 'black50' | 'black40' | 'black10' | 'black05' | 'black04' | 'blackHelena' | 'blackJanice' | 'grayJanice' | 'grayKaren' | 'grayMonica' | 'graySandra' | 'grayPatricia' | 'graySarah' | 'grayStassie' | 'grayAdriana' | 'greenGoogle' | 'grayBarbara' | 'grayStephanie' | 'grayFrances' | 'grayTina' | 'green100' | 'green50' | 'green25' | 'green10' | 'green10Background' | 'whiteStandard' | 'whiteJanice' | 'yellowGoogle' | 'yellow100' | 'yellow50' | 'yellow25' | 'yellow10' | 'yellow10Background' | 'redGoogle' | 'red100' | 'red50' | 'red25' | 'red10' | 'red10Background' | 'blueGoogle' | 'blueRest' | 'blueActive' | 'blueHover' | 'blueFocus' | 'blueBr' | 'blueKaren' | 'blueMonica' | 'violetStephanie' | 'violetJanice' | 'amnezia' | 'inherit' | 'currentColor';

declare type IThemeSize = 'large' | 'largeMedium' | 'medium' | 'mediumSmall' | 'small';

declare type IThemeTypographyHeading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'h8' | 'h9';

declare type IThemeTypographyWeight = 100 | 300 | 400 | 500 | 700 | 900;

export declare type MonthItem = {
    localeLong: string;
    localeShort: string;
    value: 'january' | 'february' | 'march' | 'april' | 'may' | 'june' | 'july' | 'august' | 'september' | 'october' | 'november' | 'december';
};

declare type SelectMonthProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
    dateMin?: number;
    dateMax?: number;
    value: number | null;
    isShortLabel?: boolean;
    onChange: (value: number | null) => void;
    monthsLocale: MonthItem[];
};

declare type SelectProps<T extends ISelectItem> = addErrorProps & addFontProps & addSXProps & {
    id?: string;
    size: IThemeSize;
    genre: TInputSelect;
    isToggleWhenClickSelectListOption?: boolean;
    isDisabled?: boolean;
    isShowDropdownOptionIcon?: boolean;
    isShowIconToggle?: boolean;
    isShowIconSearchClear?: boolean;
    isShowIconFetching?: boolean;
    isShowSelectAll?: boolean;
    isShowSelectAllLabel?: boolean;
    isShowAddOption?: boolean;
    isNotShowDisabledOptions?: boolean;
    isOnClickOptionClose?: boolean;
    isNotShowHoverStyle?: boolean;
    isSortValueAsOption?: boolean;
    isCenter?: boolean;
    isStayValueAfterSelect?: boolean;
    isBold?: boolean;
    isWrapSelectOption?: boolean;
    isMulti?: boolean;
    isFetching?: boolean;
    isClearWhenClickSelectListOption?: boolean;
    isStaySearchAfterSelect?: boolean;
    isOnlyColorInSelectListOption?: boolean;
    labelPlaceholder?: string;
    labelEmptyOption?: string;
    labelSelectAll?: string;
    labelAndMore?: (count: number) => string;
    labelAddOption?: (value: string) => string;
    isSearch?: boolean;
    valueSearch?: string;
    onChangeSearch?: (value: string) => void;
    optionAllLength?: number;
    option: T[];
    value: T[];
    maxViewSelect?: number;
    maxViewDropdown?: number;
    minViewDropdown?: number;
    refFloating?: Ref<HTMLElement | null>;
    refReference?: Ref<HTMLElement | null>;
    onAddOption?: (value: string) => void;
    onChange: (value: T[]) => void;
    onChangeAll?: (value: T[], isAll: boolean) => void;
    onFocus?: (event?: FocusEvent_2<HTMLElement>) => void;
    onBlur?: (event?: FocusEvent_2<HTMLElement>) => void;
    fetchNextPage?: () => void;
    getEstimateSize?: (index: number) => number;
};

declare type StyledInputProps = AddDollarSign<Pick<InputProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isInputEffect' | 'isDisabled' | 'postfixChildren' | 'prefixChildren' | 'isBold' | 'isNiceNumber' | 'isNotShowHoverStyle' | 'sx' | 'isCenter' | 'font'>> & addOutlinePropsDollar;

declare type StyledInputWrapperProps = AddDollarSign<Pick<InputProps, 'isDisabled' | 'isInputEffect' | 'sx' | 'size' | 'isWidthAsHeight'>>;

declare type SXProps = ({
    default: CSSObject;
} & {
    [K in IThemeDevice]?: CSSObject;
}) | ((theme: DefaultTheme) => {
    default: CSSObject;
} & {
    [K in IThemeDevice]?: CSSObject;
});

declare type TButtonGenre = keyof IThemeGenre;

export declare type TDateGenre = keyof IThemeGenreDate;

declare type TInputGenre = keyof IThemeGenreInput;

declare type TInputSelect = keyof IThemeGenreSelect;

declare type TypographyAllProps = TypographyDataProps | TypographyVariantProps;

declare type TypographyDataProps = TypographyDefaultProps & {
    size?: number;
};

declare type TypographyDefaultProps = {
    align?: CSSProperties['textAlign'];
    color?: IThemePaletteKeys;
    cursor?: CSSProperties['cursor'];
    decoration?: CSSProperties['textDecoration'];
    family?: IThemeFontFamily;
    flex?: string;
    height?: number | string;
    isHoverUnderlining?: boolean;
    letterSpacing?: CSSProperties['letterSpacing'];
    line?: number;
    overflow?: CSSProperties['overflow'];
    shadow?: 'shadowPulse';
    transform?: CSSProperties['textTransform'];
    weight?: IThemeTypographyWeight;
    wrap?: CSSProperties['textWrap'];
    isNoUserSelect?: boolean;
};

declare type TypographySXProps = {
    default: TypographyAllProps;
} & {
    [K in IThemeDevice]?: TypographyAllProps;
};

declare type TypographyVariantProps = TypographyDefaultProps & {
    variant: IThemeTypographyHeading;
};

declare type UncontrolledValue = {
    defaultValue: string | number | null | undefined;
    value?: never;
};

declare type UncontrolledValue_2 = {
    defaultValue: number | null | undefined;
    value?: never;
};

export declare type WeekItem = {
    localeLong: string;
    localeShort: string;
    value: 'mo' | 'tu' | 'we' | 'th' | 'fr' | 'sa' | 'su';
};

export { }