import { SelectInput, SelectInputOptionContent } from '@transferwise/components';
import { Flag } from '@wise/art';
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { g as getCurrencyForCode, a as getAllCurrencies } from './currencies-1f1f52ab.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

var css_248z = ".cc_tw-select_4099316779 a {\n  text-decoration: none;\n}\n.cc_currency-selector_4099316779 {\n  width: 100%;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vQ3VycmVuY3lTZWxlY3Rvci5tb2R1bGUubGVzcyIsIkN1cnJlbmN5U2VsZWN0b3IubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxxQkFBQTtBQ0RGO0FESUE7RUFDRSxXQUFBO0FDRkYiLCJmaWxlIjoiQ3VycmVuY3lTZWxlY3Rvci5tb2R1bGUubGVzcyJ9 */";
var defaultStyles = {"tw-select":"cc_tw-select_4099316779","twSelect":"cc_tw-select_4099316779","currency-selector":"cc_currency-selector_4099316779","currencySelector":"cc_currency-selector_4099316779"};
styleInject(css_248z);

function sortByCurrencyCode(a, b) {
  return a.value.code.localeCompare(b.value.code);
}
function toCurrencyOption(currency) {
  return {
    type: 'option',
    value: currency
  };
}
function generateCurrencyList(availableCurrencies) {
  return availableCurrencies ? availableCurrencies.map(getCurrencyForCode).filter(currency => currency !== undefined) : getAllCurrencies();
}
function generateCurrencyOptions(searchTerm, translate, availableCurrencies) {
  return generateCurrencyList(availableCurrencies).map(c => ({
    code: c.code,
    name: translate({
      id: c.nameTranslationKey
    })
  })).filter(c => {
    const currency = `${c.code} ${c.name}`.toLowerCase();
    return currency.includes(searchTerm.toLowerCase());
  }).map(toCurrencyOption).sort(sortByCurrencyCode);
}
const CurrencySelector = ({
  type,
  currencyCode,
  style,
  search,
  onSelectChange,
  availableCurrencies,
  disabled
}) => {
  const {
    formatMessage
  } = useIntl();
  const derivedStyles = {
    ...style,
    ...defaultStyles
  };
  const items = useMemo(() => {
    return generateCurrencyOptions(search, formatMessage, availableCurrencies);
  }, [availableCurrencies, formatMessage, search]);
  const selectedValue = useMemo(() => {
    const selectedOption = items.find(item => item.value.code === currencyCode);
    return selectedOption?.value;
  }, [currencyCode, items]);
  return /*#__PURE__*/React.createElement(SelectInput, {
    className: `${derivedStyles['currency-selector']}`,
    placeholder: formatMessage({
      id: 'search-currency'
    }),
    disabled: disabled,
    filterable: true,
    filterPlaceholder: formatMessage({
      id: 'search-currency'
    }),
    items: items,
    value: selectedValue,
    onChange: value => onSelectChange(type)(value),
    renderValue: currency => /*#__PURE__*/React.createElement(SelectInputOptionContent, {
      title: currency.code,
      note: currency.name,
      icon: /*#__PURE__*/React.createElement(Flag, {
        code: currency.code,
        intrinsicSize: 24
      })
    })
  });
};
CurrencySelector.propTypes = {
  type: PropTypes.string.isRequired,
  currencyCode: PropTypes.string.isRequired,
  style: PropTypes.shape({}).isRequired,
  search: PropTypes.string,
  onSelectChange: PropTypes.func,
  availableCurrencies: PropTypes.arrayOf(PropTypes.string),
  disabled: PropTypes.bool
};
CurrencySelector.defaultProps = {
  search: '',
  onSelectChange: () => {},
  availableCurrencies: null,
  disabled: false
};

export { CurrencySelector as C };
//# sourceMappingURL=CurrencySelector-ce70c38b.js.map
