'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactI18next = require('react-i18next');
var search = require('../../../../../assets/search.cjs');
var Icon = require('../../../../../components/Icon/Icon.cjs');
var IconButton = require('../../../../../components/IconButton/IconButton.cjs');
var ModalHeader = require('../../../../../components/ModalHeader/ModalHeader.cjs');
var Typography = require('../../../../../components/Typography/Typography.cjs');
var close = require('../../../../../shared/assets/close.cjs');
require('@dynamic-labs/iconic');
require('../../../../../context/ViewContext/ViewContext.cjs');
var classNames = require('../../../../../utils/functions/classNames/classNames.cjs');
var isTrustedImageUrl = require('../isTrustedImageUrl.cjs');

const STABLECOIN_CODES = new Set([
    'busd',
    'dai',
    'frax',
    'gusd',
    'pyusd',
    'tusd',
    'usdbc',
    'usdc',
    'usdc_matic',
    'usdc_sol',
    'usdp',
    'usdt',
    'usdt_matic',
    'usdt_sol',
]);
const NATIVE_TOKEN_CODES = new Set([
    'avax_cchain',
    'bnb',
    'btc',
    'eth',
    'ftm',
    'matic_polygon',
    'pol_polygon',
    'sol',
]);
const getTokenSortOrder = (code) => {
    const lower = code.toLowerCase();
    if (STABLECOIN_CODES.has(lower))
        return 0;
    if (NATIVE_TOKEN_CODES.has(lower))
        return 1;
    return 2;
};
const sortTokens = (tokens) => [...tokens].sort((a, b) => {
    const orderDiff = getTokenSortOrder(a.code) - getTokenSortOrder(b.code);
    if (orderDiff !== 0)
        return orderDiff;
    return a.name.localeCompare(b.name);
});
const CryptoTokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, }) => {
    const { t } = reactI18next.useTranslation();
    const [search$1, setSearch] = React.useState('');
    const filteredTokens = sortTokens(tokens.filter((token) => {
        const query = search$1.toLowerCase();
        return (token.code.toLowerCase().includes(query) ||
            token.name.toLowerCase().includes(query));
    }));
    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'close-button', "data-testid": 'close-button', onClick: onClose, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
    return (jsxRuntime.jsxs("div", { className: 'currency-select', "data-testid": 'crypto-token-select', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_moonpay_onramp.select_token', 'Select Token') }) }), jsxRuntime.jsxs("label", { htmlFor: 'crypto-token-select-search', className: 'currency-select__search', children: [jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: jsxRuntime.jsx(search.ReactComponent, {}) }), jsxRuntime.jsx("input", { id: 'crypto-token-select-search', placeholder: t('dyn_moonpay_onramp.search_token_placeholder', 'Search tokens'), className: 'currency-select__search__input', value: search$1, onChange: (e) => setSearch(e.target.value.trim().slice(0, 100)) })] }), jsxRuntime.jsx("div", { className: 'currency-select__currencies', children: filteredTokens.map((token) => (jsxRuntime.jsxs("div", { className: classNames.classNames('currency-select__currencies__option', {
                        'currency-select__currencies__option--selected': token.code === currentToken,
                    }), onClick: () => onSelectToken(token.code), onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            onSelectToken(token.code);
                        }
                    }, role: 'option', "aria-selected": token.code === currentToken, tabIndex: 0, "data-testid": `token-option-${token.code}`, children: [isTrustedImageUrl.isTrustedImageUrl(token.icon) && (jsxRuntime.jsx("img", { src: token.icon, alt: token.name, className: 'currency-select__currencies__option__icon', "aria-hidden": 'true' })), jsxRuntime.jsx("div", { className: 'currency-select__currencies__option__info', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'medium', children: token.name }) })] }, token.code))) })] }));
};

exports.CryptoTokenSelectScreen = CryptoTokenSelectScreen;
