import { jsx as _jsx } from "react/jsx-runtime";
import { Select } from "#ui";
import React, { useMemo } from "react";
import { FormGroup } from "../fragments/index.js";
import { withFieldValidation } from "../fragments/with-field-validation/with-field-validation.js";
import { getCurrencies } from "./utils.js";
export const CurrencyCodeFieldRaw = React.forwardRef(({ placeholder, currencies = [], favoriteCurrencies = [], includeCurrencySymbols = true, symbolPosition = "right", searchable = false, contentClassName, contentAlign = "start", allowedTypes = "Both", ...props }, ref) => {
    const defaultCurrencies = currencies && currencies.length > 0
        ? currencies
        : getCurrencies(allowedTypes);
    const options = useMemo(() => {
        const favoriteTickers = new Set(favoriteCurrencies);
        return (defaultCurrencies
            .map((currency) => {
            if (favoriteTickers.has(currency.ticker)) {
                return null;
            }
            let label = currency.label ?? currency.ticker;
            if (includeCurrencySymbols && currency.symbol) {
                label =
                    symbolPosition === "right"
                        ? `${label} (${currency.symbol})`
                        : `(${currency.symbol}) ${label}`;
            }
            const option = {
                label,
                value: currency.ticker,
            };
            if ("icon" in currency) {
                option.icon = currency.icon;
            }
            return option;
        })
            .filter(Boolean) ?? []);
    }, [
        defaultCurrencies,
        includeCurrencySymbols,
        symbolPosition,
        favoriteCurrencies,
    ]);
    const favoriteOptions = useMemo(() => {
        const favoriteTickers = new Set(favoriteCurrencies);
        return (defaultCurrencies
            .filter((currency) => favoriteTickers.has(currency.ticker))
            .map((currency) => {
            let label = currency.label ?? currency.ticker;
            if (includeCurrencySymbols && currency.symbol) {
                label =
                    symbolPosition === "right"
                        ? `${label} (${currency.symbol})`
                        : `(${currency.symbol}) ${label}`;
            }
            const option = {
                label,
                value: currency.ticker,
            };
            if ("icon" in currency) {
                option.icon = currency.icon;
            }
            return option;
        }) ?? []);
    }, [
        defaultCurrencies,
        favoriteCurrencies,
        includeCurrencySymbols,
        symbolPosition,
    ]);
    return (_jsx(FormGroup, { children: _jsx(Select, { ref: ref, options: options, selectionIcon: "checkmark", searchable: searchable, multiple: false, placeholder: placeholder, contentAlign: contentAlign, contentClassName: contentClassName, favoriteOptions: favoriteOptions, ...props }) }));
});
CurrencyCodeFieldRaw.displayName = "CurrencyCodeFieldRaw";
export const CurrencyCodeField = withFieldValidation(CurrencyCodeFieldRaw);
CurrencyCodeField.displayName = "CurrencyCodeField";
//# sourceMappingURL=currency-code-field.js.map