'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as SvgSearch } from '../../../../../assets/search.js';
import { Icon } from '../../../../../components/Icon/Icon.js';
import { IconButton } from '../../../../../components/IconButton/IconButton.js';
import { ModalHeader } from '../../../../../components/ModalHeader/ModalHeader.js';
import { Typography } from '../../../../../components/Typography/Typography.js';
import { ReactComponent as SvgClose } from '../../../../../shared/assets/close.js';
import '@dynamic-labs/iconic';
import '../../../../../context/ViewContext/ViewContext.js';
import { classNames } from '../../../../../utils/functions/classNames/classNames.js';
import { isTrustedImageUrl } from '../isTrustedImageUrl.js';

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 } = useTranslation();
    const [search, setSearch] = useState('');
    const filteredTokens = sortTokens(tokens.filter((token) => {
        const query = search.toLowerCase();
        return (token.code.toLowerCase().includes(query) ||
            token.name.toLowerCase().includes(query));
    }));
    const closeButton = (jsx(IconButton, { type: 'button', id: 'close-button', "data-testid": 'close-button', onClick: onClose, children: jsx(SvgClose, {}) }));
    return (jsxs("div", { className: 'currency-select', "data-testid": 'crypto-token-select', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', children: t('dyn_moonpay_onramp.select_token', 'Select Token') }) }), jsxs("label", { htmlFor: 'crypto-token-select-search', className: 'currency-select__search', children: [jsx(Icon, { color: 'text-tertiary', size: 'small', children: jsx(SvgSearch, {}) }), jsx("input", { id: 'crypto-token-select-search', placeholder: t('dyn_moonpay_onramp.search_token_placeholder', 'Search tokens'), className: 'currency-select__search__input', value: search, onChange: (e) => setSearch(e.target.value.trim().slice(0, 100)) })] }), jsx("div", { className: 'currency-select__currencies', children: filteredTokens.map((token) => (jsxs("div", { className: 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(token.icon) && (jsx("img", { src: token.icon, alt: token.name, className: 'currency-select__currencies__option__icon', "aria-hidden": 'true' })), jsx("div", { className: 'currency-select__currencies__option__info', children: jsx(Typography, { variant: 'body_normal', weight: 'medium', children: token.name }) })] }, token.code))) })] }));
};

export { CryptoTokenSelectScreen };
