import React, {lazy, Suspense} from 'react';
import type {Iso2} from "intl-tel-input/data";

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

export type FieldProps = {
	_id: string
	id: string
	custom_id: string
	name: string
	class: string
	value: string
	required: boolean
	placeholder: string
	initialCountry: Iso2 | "auto" | ""
	autoCountry: boolean
	onlyCountries: Iso2[]
	excludeCountries: Iso2[]
	countryOrder: Iso2[] | null
	showFlags: boolean
	separateDialCode: boolean
	nationalMode: boolean
	strictMode: boolean
	enableValidation: boolean
	fullPhone: boolean
	internationalisation: string
	customMessages: boolean
	TOO_SHORT: string
	TOO_LONG: string
	INVALID_BUT_POSSIBLE: string
	INVALID_COUNTRY_CODE: string
	INVALID_LENGTH: string
	NOT_A_NUMBER: string
	UNKNOWN: string
	formElement: HTMLFormElement
}

const defaultProps = {
	autoCountry: false,
	showFlags: true,
	separateDialCode: false,
	fullPhone: false,
	internationalisation: 'en',
	customMessages: false,
	TOO_SHORT: '',
	TOO_LONG: '',
	INVALID_BUT_POSSIBLE: '',
	INVALID_COUNTRY_CODE: '',
	INVALID_LENGTH: '',
	NOT_A_NUMBER: '',
	UNKNOWN: '',
};

const Field = (props: FieldProps) => {

	const Fallback = (
		<input
			id={`${props.id}-telephone`}
			name={props.name}
			className={props.class}
			defaultValue={props.value}
			placeholder={props.placeholder}
		/>
	)

	return (
		<Suspense fallback={Fallback}>
			<IntlTelInputLazy
				{...defaultProps}
				{...props}
			/>
		</Suspense>
	);
};

export default Field;
