'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 utils = require('@dynamic-labs/utils');
var noWalletFound = require('../../assets/no-wallet-found.cjs');
var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
var Search = require('../../components/Search/Search.cjs');
var Skeleton = require('../../components/Skeleton/Skeleton.cjs');
var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
var DefaultFooter = require('../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.cjs');
require('@dynamic-labs-sdk/client/core');
require('@dynamic-labs/sdk-api-core');
require('../../client/client.cjs');
require('@dynamic-labs-sdk/client');
require('../../config/ApiEndpoint.cjs');
require('@dynamic-labs/iconic');
require('@dynamic-labs/wallet-connector-core');
require('../../context/ViewContext/ViewContext.cjs');
require('../../shared/logger.cjs');
require('@dynamic-labs/wallet-book');
var localStorage = require('../../utils/constants/localStorage.cjs');
require('../../utils/constants/colors.cjs');
require('../../utils/constants/values.cjs');
require('../../shared/consts/index.cjs');
require('../../../../_virtual/_tslib.cjs');
require('@dynamic-labs/multi-wallet');
require('react-international-phone');
require('../../store/state/nonce/nonce.cjs');
require('@dynamic-labs/locale');
require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
require('../../store/state/primaryWalletId/primaryWalletId.cjs');
require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
require('../../events/dynamicEvents.cjs');
var useProjectSettings = require('../../client/extension/projectSettings/useProjectSettings/useProjectSettings.cjs');
var classNames = require('../../utils/functions/classNames/classNames.cjs');
var useEffectOnce = require('../../utils/hooks/useEffectOnce/useEffectOnce.cjs');
var convertExchangeKeyAndProviderEnum = require('../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
var SearchNotFoundMessage = require('../WalletList/SearchNotFoundMessage/SearchNotFoundMessage.cjs');
var ExchangeListItem = require('./ExchangeListItem/ExchangeListItem.cjs');

const ExchangeList = ({ onSelectExchange, showDefaultFooter, scrollContainerClassName, }) => {
    var _a;
    /**
     * Clear search key on unmount
     */
    useEffectOnce.useEffectOnce(() => () => utils.StorageService === null || utils.StorageService === void 0 ? void 0 : utils.StorageService.setItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY, ''));
    const { error } = ErrorContext.useErrorContext();
    const [footerBorderIsVisible, setFooterBorderIsVisible] = React.useState(true);
    const { t } = reactI18next.useTranslation();
    const projectSettings = useProjectSettings.useProjectSettings();
    const [filterValue, setFilterValue] = React.useState((_a = utils.StorageService.getItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
    const exchangeNames = React.useMemo(() => {
        if (!(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.exchanges))
            return [];
        const names = projectSettings.exchanges.flatMap(({ exchange, enabledAt }) => {
            if (!enabledAt)
                return [];
            return [convertExchangeKeyAndProviderEnum.convertExchangeKeytoProviderEnum(exchange)];
        });
        return [...new Set(names)];
    }, [projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.exchanges]);
    const filteredExchangeNames = React.useMemo(() => {
        const term = filterValue.trim().toLowerCase();
        if (!term)
            return exchangeNames;
        return exchangeNames.filter((provider) => convertExchangeKeyAndProviderEnum.convertProviderToExchangeKeyEnum(provider).toLowerCase().includes(term));
    }, [exchangeNames, filterValue]);
    const exchangeListScrollRef = React.useRef(null);
    /* istanbul ignore next */
    const handleScroll = () => {
        const element = exchangeListScrollRef.current;
        if (!element) {
            return;
        }
        if ((element === null || element === void 0 ? void 0 : element.scrollTop) > (element === null || element === void 0 ? void 0 : element.clientHeight) * 1.25) {
            setFooterBorderIsVisible(false);
        }
        else {
            setFooterBorderIsVisible(true);
        }
    };
    const handleFilterValueChange = (value) => {
        utils.StorageService.setItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY, value);
        setFilterValue(value);
    };
    const searchContainer = !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'exchange-list__search-skeleton' })) : (jsxRuntime.jsx("div", { className: classNames.classNames('exchange-list__search-container', {
            'exchange-list__search-container--scroll': !error,
        }), children: jsxRuntime.jsx(Search.Search, { copykey: 'dyn_exchange_list.search.label', label: t('dyn_exchange_list.search.label'), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) }));
    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'exchange-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: classNames.classNames('exchange-list__scroll-container', scrollContainerClassName, {
                    'exchange-list__scroll-container--error': Boolean(error),
                    'exchange-list__scroll-container--fixed-height': false,
                }), "data-testid": 'exchange-list-scroll-container', ref: exchangeListScrollRef, onScroll: handleScroll, children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'exchange-list__tile-skeleton' })) : (
                // eslint-disable-next-line react/jsx-no-useless-fragment
                jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [exchangeNames.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_exchange_list.no_exchange', children: t('dyn_exchange_list.no_exchanges') })), exchangeNames.length && filteredExchangeNames.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { titleKey: 'dyn_exchange_list.search.not_found.title', subtitleKey: 'dyn_exchange_list.search.not_found.description', image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (filteredExchangeNames.map((exchange, index) => (jsxRuntime.jsx(ExchangeListItem.ExchangeListItem, { exchange: convertExchangeKeyAndProviderEnum.convertProviderToExchangeKeyEnum(exchange), onResetSearchValue: () => handleFilterValueChange(''), onSelectExchange: onSelectExchange }, `${exchange}_${index}`))))] })) }), showDefaultFooter && (jsxRuntime.jsx(DefaultFooter.DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
};

exports.ExchangeList = ExchangeList;
