import {lazy, Suspense, useMemo} from 'react';
import renderHtmlAttributes from "../../utils/renderHtmlAttributes";
import UpgradeOverlay from "../../components/UpgradeOverlay";
import type {FreemiusProps} from "../../types/freemius";
import type {AllOptions} from "modules/types/public-api";
import {__} from "@wordpress/i18n";

const TelInput = lazy(() => import("./TelInput"));

export type FieldProps = {
	itemId: string
	formId: string
	attrs: Record<string, string | string[]>
	value: string
	initialCountry: AllOptions['initialCountry']
	autoCountry: boolean
	showFlags: boolean
	separateDialCode: boolean
	nationalMode: boolean
	strictMode: boolean
	specifyCountries: 'include' | 'exclude'
	onlyCountries: AllOptions['onlyCountries']
	excludeCountries: AllOptions['excludeCountries']
	countryOrder: AllOptions['countryOrder']
	placeholder: string
	custom_id: string
	fullPhone: boolean
} & FreemiusProps

const Field = (props: FieldProps) => {

	const attrs = useMemo(() => renderHtmlAttributes(props.attrs), [props.attrs]);

	const Fallback = (
		<input
			{...attrs}
			placeholder={__('Initialising…', 'advanced-fields-for-elementor-forms')}
		/>
	)

	return (
		<>
			{!props.freemius.can_use_premium_code ? (
				<>
					<UpgradeOverlay url={props.freemius.get_upgrade_url}/>
					{Fallback}
				</>
			) : (
				<Suspense fallback={Fallback}>
					<TelInput
						{...props}
						attrs={attrs}
					/>
				</Suspense>
			)}
		</>
	);
};

export default Field;