import React, { ReactNode, InputHTMLAttributes } from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

/**
 * Country data for phone input
 */
interface Country {
    /** ISO 3166-1 alpha-2 country code (e.g., "US", "GB") */
    code: string;
    /** Country name */
    name: string;
    /** International dial code (e.g., "+1", "+44") */
    dialCode: string;
    /** Flag icon component */
    flag?: ReactNode;
}
interface InputPhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange">, ThemeOverrideProps {
    /**
     * Property for specifying the value of the control.
     */
    value?: string;
    /**
     * Property for specifying the placeholder of the control.
     */
    placeholder?: string;
    /**
     * Event handler when the value changes (for controlled mode).
     */
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * Event handler when the text changes (alternative to onChange).
     */
    onChangeText?: (text: string) => void;
    /**
     * Property for changing the size of the input.
     */
    size?: "xl" | "lg" | "md" | "sm" | "xs";
    /**
     * Property for specifying the name of the control.
     */
    name?: string;
    /**
     * Property for disabling the control.
     */
    disabled?: boolean;
    /**
     * Property for displaying an error message and highlighting the control as invalid.
     */
    errorMessage?: string;
    /**
     * Property for displaying an error and highlighting the control as invalid.
     */
    error?: boolean;
    /**
     * Array of countries to display in the dropdown.
     * Defaults to all 200+ countries if not provided.
     */
    countries?: Country[];
    /**
     * Currently selected country.
     */
    selectedCountry?: Country;
    /**
     * Callback when a country is selected.
     */
    onCountryChange?: (country: Country) => void;
    /**
     * Add function clear for input.
     */
    extraClear?: boolean;
    /**
     * Function triggered when user clicks on extraClear button.
     */
    onRemove?: () => void;
    /**
     * Property for show checked status in input. Show only if not errorMessage.
     */
    checked?: boolean;
    /**
     * Property for passing a new icon to replace the default checked icon.
     */
    checkedIcon?: ReactNode;
    /**
     * Unique identifier for the input element. Used for accessibility linking.
     */
    id?: string;
    /**
     * Accessible label for screen readers when no visible label is present.
     */
    "aria-label"?: string;
    testID?: string;
}
declare const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps & React.RefAttributes<HTMLInputElement>>;

interface UsePhoneNumberOptions {
    /** Initial country code (ISO 3166-1 alpha-2, e.g., "US", "MY") */
    initialCountry?: string;
    /** Initial phone number value */
    initialValue?: string;
    /** Callback when phone number changes */
    onChange?: (phoneNumber: string) => void;
    /** Callback when country changes */
    onCountryChange?: (country: Country | undefined) => void;
}
interface UsePhoneNumberReturn {
    /** Raw phone number (with country code) */
    phoneNumber: string;
    /** Formatted phone number for display */
    formattedPhoneNumber: string;
    /** Currently detected/selected country */
    country: Country | undefined;
    /** All available countries */
    countries: Country[];
    /** Country-specific placeholder mask */
    placeholder: string | undefined;
    /** Handle phone number input change */
    handlePhoneChange: (value: string) => void;
    /** Handle country selection change */
    handleCountryChange: (country: Country) => void;
    /** Set phone number programmatically */
    setPhoneNumber: (value: string) => void;
}
/**
 * Hook for managing phone number input with formatting, country detection
 * and a country-specific placeholder.
 *
 * @example
 * ```tsx
 * const {
 *   placeholder,
 *   phoneNumber,
 *   formattedPhoneNumber,
 *   country,
 *   countries,
 *   handlePhoneChange,
 *   handleCountryChange,
 * } = usePhoneNumber({
 *   initialCountry: "MY",
 *   onChange: (phone) => console.log("Phone:", phone),
 * });
 * ```
 */
declare const usePhoneNumber: (options?: UsePhoneNumberOptions) => UsePhoneNumberReturn;

/**
 * Get flag component for a country code
 */
declare const getFlag: (code: string) => React.ReactNode;
/**
 * Complete list of all countries with flags
 * Sorted alphabetically by name
 */
declare const allCountries: Country[];
/**
 * Get a country by its ISO code
 */
declare const getCountryByCode: (code: string) => Country | undefined;
/**
 * Get a country by its dial code
 */
declare const getCountryByDialCode: (dialCode: string) => Country | undefined;
/**
 * Get a placeholder by country
 */
declare function getPlaceholderByCode(code?: string): string | undefined;
/**
 * Default countries (commonly used)
 */
declare const defaultCountries: Country[];

export { type Country, InputPhone, type InputPhoneProps, type UsePhoneNumberOptions, type UsePhoneNumberReturn, allCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getFlag, getPlaceholderByCode, usePhoneNumber };