import { jsx as _jsx } from "react/jsx-runtime";
import React, { useCallback, useEffect, useState } from 'react';
import { Select } from '../select/index.js';
import { CircleFlag } from 'react-circle-flags';
import countries from 'world-countries';
import { SelectDiff } from '../select/select-diff.js';
const renderCountryIcon = (showFlagIcons, countryCode) => {
    if (!showFlagIcons || !countryCode)
        return undefined;
    return _jsx(CircleFlag, { className: "size-4", countryCode: countryCode.toLowerCase(), height: 16 });
};
const CountryCodePicker = React.forwardRef(({ label, required, value, defaultValue, onChange, placeholder, allowedCountries, excludedCountries, includeDependentAreas = false, optionFormat = 'NamesOnly', showFlagIcons = true, enableSearch, viewMode = 'edition', baseValue, ...props }, ref) => {
    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
    const defaultOptions = countries
        .filter((country) => (includeDependentAreas ? true : country.independent) && country.cca2 !== 'AQ' // exclude Antarctica
    )
        .map((country) => ({
        value: country.cca2,
        label: optionFormat === 'CodesOnly'
            ? country.cca2
            : optionFormat === 'NamesAndCodes'
                ? `${country.name.common} (${country.cca2})`
                : country.name.common,
        icon: showFlagIcons
            ? () => _jsx(CircleFlag, { className: "size-4", countryCode: country.cca2.toLowerCase(), height: 16 })
            : undefined,
    }))
        .sort((a, b) => (a.label > b.label ? 1 : a.label < b.label ? -1 : 0));
    const options = Array.isArray(allowedCountries) || Array.isArray(excludedCountries)
        ? defaultOptions.filter((option) => (!allowedCountries || allowedCountries.includes(option.value)) &&
            !excludedCountries?.includes(option.value))
        : defaultOptions;
    const selectedOption = options.find((option) => option.value === internalValue);
    const baseOption = options.find((option) => option.value === baseValue);
    const selectedLabel = selectedOption?.label ?? internalValue;
    const baseLabel = baseOption?.label ?? baseValue;
    const baseIcon = baseOption ? renderCountryIcon(showFlagIcons, baseValue ?? '') : undefined;
    const icon = selectedOption ? renderCountryIcon(showFlagIcons, internalValue) : undefined;
    const handleChange = useCallback((value) => {
        if (Array.isArray(value)) {
            console.warn('CountryCodePicker received array value, expected string');
            return;
        }
        setInternalValue(value);
        onChange?.(value);
    }, [onChange]);
    useEffect(() => {
        if (value !== undefined) {
            setInternalValue(value);
        }
    }, [value]);
    if (viewMode === 'edition') {
        return (_jsx(Select, { ref: ref, options: options, selectionIcon: "checkmark", selectionIconPosition: "right", searchable: enableSearch, value: internalValue, onChange: handleChange, placeholder: placeholder, label: label, required: required, ...props }));
    }
    return (_jsx(SelectDiff, { value: selectedLabel, label: label, required: required, viewMode: viewMode, baseValue: baseLabel, baseIcon: baseIcon, icon: icon }));
});
CountryCodePicker.displayName = 'CountryCodePicker';
export { CountryCodePicker };
//# sourceMappingURL=country-code-picker.js.map