import { Loader } from '@transferwise/components';
import { Cross } from '@transferwise/icons';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { injectIntl, FormattedMessage, useIntl } from 'react-intl';
import { format } from 'date-fns';
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import be from 'date-fns/locale/be';
import bg from 'date-fns/locale/bg';
import ca from 'date-fns/locale/ca';
import cs from 'date-fns/locale/cs';
import da from 'date-fns/locale/da';
import de from 'date-fns/locale/de';
import el from 'date-fns/locale/el';
import en from 'date-fns/locale/en-GB';
import eo from 'date-fns/locale/eo';
import es from 'date-fns/locale/es';
import fi from 'date-fns/locale/fi';
import fr from 'date-fns/locale/fr';
import hr from 'date-fns/locale/hr';
import hu from 'date-fns/locale/hu';
import id from 'date-fns/locale/id';
import is from 'date-fns/locale/is';
import it from 'date-fns/locale/it';
import ja from 'date-fns/locale/ja';
import ko from 'date-fns/locale/ko';
import mk from 'date-fns/locale/mk';
import nb from 'date-fns/locale/nb';
import nl from 'date-fns/locale/nl';
import pl from 'date-fns/locale/pl';
import pt from 'date-fns/locale/pt';
import ro from 'date-fns/locale/ro';
import ru from 'date-fns/locale/ru';
import sk from 'date-fns/locale/sk';
import sl from 'date-fns/locale/sl';
import sr from 'date-fns/locale/sr';
import sv from 'date-fns/locale/sv';
import th from 'date-fns/locale/th';
import tr from 'date-fns/locale/tr';
import zh_cn from 'date-fns/locale/zh-CN';
import zh_hk from 'date-fns/locale/zh-HK';
import { jsx } from 'react/jsx-runtime';
import { useTheme } from '@wise/components-theming';
import { Illustration } from '@wise/art';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

/* eslint-disable camelcase */
const langModulesByCode = {
    be,
    bg,
    ca,
    cs,
    da,
    de,
    el,
    en,
    eo,
    es,
    fi,
    fr,
    hr,
    hu,
    id,
    is,
    it,
    ja,
    ko,
    mk,
    nb,
    nl,
    pl,
    pt,
    ro,
    ru,
    sk,
    sl,
    sr,
    sv,
    th,
    tr,
    zh_cn,
    zh_hk,
};
const NONSTRIPPED_LOCALES = new Set(['zh-cn', 'zh-hk']);
const getLanguage = (locale) => {
    const sanitisedLocale = locale.toLowerCase();
    return NONSTRIPPED_LOCALES.has(sanitisedLocale)
        ? sanitisedLocale.replace('-', '_').toLowerCase()
        : sanitisedLocale.slice(0, 2);
};
function requestLanguage(locale) {
    const lang = getLanguage(locale);
    return langModulesByCode[lang] || en;
}
const timeAgoFrom = (time, locale) => {
    return formatDistanceToNow(time, { locale: requestLanguage(locale) });
};
const dateFormat = (date, locale) => {
    return format(date, 'dd MMM yyyy HH:mm', { locale: requestLanguage(locale) });
};

function injectTheme(WrappedComponent) {
    return React.forwardRef((props, ref) => {
        const { isScreenModeDark } = useTheme();
        return jsx(WrappedComponent, Object.assign({}, props, { isScreenModeDark: isScreenModeDark, ref: ref }));
    });
}

const tagValues = {
  b: (...chunks) => /*#__PURE__*/React.createElement("b", null, chunks),
  p: (...chunks) => /*#__PURE__*/React.createElement("p", null, chunks),
  ul: (...chunks) => /*#__PURE__*/React.createElement("ul", null, chunks)
};
const TEXT_ALIGN_CLASS = 'text-xs-center';
const DisclaimerCloseButton = ({
  id,
  className,
  createClassNames,
  onClickToClose
}) => {
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    id: id,
    className: className,
    onClick: onClickToClose
  }, /*#__PURE__*/React.createElement(Cross, {
    size: 16,
    className: createClassNames(['close-disclaimer-icon'])
  }), /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "close"
  }));
};
class Disclaimer extends Component {
  constructor(props) {
    super(props);
    autoBind(this);
    const {
      expandDisclaimer
    } = this.props;
    this.state = {
      shouldScroll: expandDisclaimer,
      openDisclaimer: expandDisclaimer,
      formatLocale: null
    };
  }
  componentDidUpdate() {
    const {
      shouldScroll
    } = this.state;
    const {
      expandDisclaimer
    } = this.props;
    const scroll = shouldScroll && shouldScroll === expandDisclaimer;
    const element = document.querySelector('#close-message');
    if (element && scroll) {
      this.doScroll(element);
    }
  }
  doScroll(element) {
    element.scrollIntoView();
    this.setState({
      shouldScroll: false
    });
  }
  clear(event) {
    event.preventDefault();
    this.setState({
      openDisclaimer: false
    });
  }
  openDisclaimer(event) {
    const {
      onClickToSeeDisclaimer
    } = this.props;
    event.preventDefault();
    this.setState({
      openDisclaimer: true
    });
    onClickToSeeDisclaimer();
  }
  renderTable() {
    const {
      createClassNames,
      referenceQuotes,
      intl
    } = this.props;
    const currentLocale = intl.locale;
    return /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['table-responsive'])
    }, /*#__PURE__*/React.createElement("table", {
      className: createClassNames(['table', 'table-condensed', 'table-striped'])
    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "provider"
    })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "currency-route"
    })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "amount-checked"
    })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "date-collection"
    })))), /*#__PURE__*/React.createElement("tbody", null, referenceQuotes.map(provider => Object.keys(provider.routes).map(source => Object.keys(provider.routes[source]).map(target => provider.routes[source][target].recordedAmounts.map(d => /*#__PURE__*/React.createElement("tr", {
      key: `${provider.alias}-${d.amount}`
    }, /*#__PURE__*/React.createElement("td", null, provider.name), /*#__PURE__*/React.createElement("td", null, source, " ", /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "to"
    }), " ", target), /*#__PURE__*/React.createElement("td", null, d.amount, " ", source), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, dateFormat(new Date(d.dateCollected), currentLocale), " UTC"))))))))));
  }
  renderDisclaimerText() {
    const {
      loading,
      createClassNames,
      referenceQuotes,
      style
    } = this.props;
    if (loading) {
      return /*#__PURE__*/React.createElement("div", {
        className: createClassNames([TEXT_ALIGN_CLASS, 'm-t-3'])
      }, /*#__PURE__*/React.createElement(Loader, {
        classNames: style
      }));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['small', 'm-t-2'])
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      values: tagValues,
      id: "disclaimer-introduction"
    }), /*#__PURE__*/React.createElement(FormattedMessage, {
      values: tagValues,
      id: "disclaimer-transfer-fee"
    }), /*#__PURE__*/React.createElement(FormattedMessage, {
      values: tagValues,
      id: "disclaimer-exchange-rate"
    }), /*#__PURE__*/React.createElement(FormattedMessage, {
      values: tagValues,
      id: "disclaimer-amount-not-collected"
    }), referenceQuotes.length > 0 && /*#__PURE__*/React.createElement(FormattedMessage, {
      values: tagValues,
      id: "disclaimer-conclusion"
    }), referenceQuotes.length > 0 && this.renderTable());
  }
  render() {
    const {
      createClassNames,
      isScreenModeDark
    } = this.props;
    const {
      openDisclaimer
    } = this.state;
    return /*#__PURE__*/React.createElement("div", {
      className: `${createClassNames(['container'])} m-t-5`
    }, openDisclaimer ? /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['small', TEXT_ALIGN_CLASS])
    }, /*#__PURE__*/React.createElement(DisclaimerCloseButton, {
      id: "top-close-disclaimer",
      className: createClassNames(['anchor', 'p-t-4', 'disclaimer-close-btn']),
      createClassNames: createClassNames,
      onClickToClose: this.clear
    })) : /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['small', TEXT_ALIGN_CLASS, 'm-b-5', isScreenModeDark ? 'text-content-secondary' : ''])
    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "disclaimer-pay-in"
    })), "\xA0", /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: createClassNames(['anchor', isScreenModeDark ? 'anchor--dark' : '']),
      onClick: this.openDisclaimer
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "how"
    }))), /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['col-sm-10', 'col-sm-offset-1', 'm-b-3'])
    }, openDisclaimer && this.renderDisclaimerText()), openDisclaimer && /*#__PURE__*/React.createElement("div", {
      className: createClassNames(['small', TEXT_ALIGN_CLASS])
    }, /*#__PURE__*/React.createElement(DisclaimerCloseButton, {
      id: "bottom-close-disclaimer",
      className: createClassNames(['anchor', 'p-b-4', 'disclaimer-close-btn']),
      createClassNames: createClassNames,
      onClickToClose: this.clear
    })));
  }
}
Disclaimer.propTypes = {
  style: PropTypes.shape({
    // TODO
  }).isRequired,
  createClassNames: PropTypes.func.isRequired,
  referenceQuotes: PropTypes.arrayOf(PropTypes.shape({
    alias: PropTypes.string.isRequired,
    country: PropTypes.string,
    logo: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    // This is a nasty shaped thing today, its dynamic keys of routes mapped straight from the API response
    routes: PropTypes.objectOf(PropTypes.object)
  })),
  // Probably should be required, but as could be async today w/ WithComparisonResources, its optional
  loading: PropTypes.bool,
  expandDisclaimer: PropTypes.bool,
  onClickToSeeDisclaimer: PropTypes.func
};
Disclaimer.defaultProps = {
  referenceQuotes: [],
  loading: false,
  expandDisclaimer: false,
  onClickToSeeDisclaimer: () => {}
};
var Disclaimer$1 = injectTheme(injectIntl(Disclaimer));

var css_248z = ".cc_error-img-main_3805190947 {\n  display: block;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vRXJyb3JJbWFnZS5tb2R1bGUubGVzcyIsIkVycm9ySW1hZ2UubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0E7RUFDRSxjQUFBO0FDQUYiLCJmaWxlIjoiRXJyb3JJbWFnZS5tb2R1bGUubGVzcyJ9 */";
var errorImageStyle = {"error-img-main":"cc_error-img-main_3805190947","errorImgMain":"cc_error-img-main_3805190947"};
styleInject(css_248z);

const ErrorImage = ({
  style
}) => {
  const {
    formatMessage
  } = useIntl();
  return /*#__PURE__*/React.createElement("div", {
    className: `${style['m-b-5']} ${errorImageStyle['error-img-main']}`
  }, /*#__PURE__*/React.createElement(Illustration, {
    loading: "lazy",
    name: "construction-fence",
    size: "medium",
    alt: formatMessage({
      id: 'error-image-alt-text'
    })
  }));
};
ErrorImage.propTypes = {
  style: PropTypes.shape({
    'm-b-5': PropTypes.string.isRequired,
    'img-responsive': PropTypes.string.isRequired
  }).isRequired
};

const ErrorMessage = ({
  unsupportedType,
  messageLabel,
  source,
  maxAmountCollected
}) => {
  const error = {
    UNSUPPORTED_AMOUNT: {
      title: 'error-unsupported-amount-title',
      body: 'error-unsupported-amount-body'
    },
    UNSUPPORTED_ROUTE: {
      title: 'error-unsupported-route-title',
      body: 'error-unsupported-route-body'
    },
    EXCEPTION: {
      title: 'error-server-title',
      body: 'error-server-body'
    }
  };
  return /*#__PURE__*/React.createElement(FormattedMessage, {
    id: error[unsupportedType][messageLabel],
    values: {
      source,
      maxAmountCollected
    }
  });
};
ErrorMessage.propTypes = {
  unsupportedType: PropTypes.string.isRequired,
  messageLabel: PropTypes.string.isRequired,
  source: PropTypes.string.isRequired,
  maxAmountCollected: PropTypes.string.isRequired
};
const ErrorTemplate = ({
  source,
  errorType,
  createClassNames,
  maxAmountCollected,
  onClickToSeeAnAvailableComparison,
  style
}) => /*#__PURE__*/React.createElement("div", {
  className: `${createClassNames(['container', 'p-t-3', 'p-b-9', 'border-radius-b'])} bg-elevated`,
  role: "alert"
}, /*#__PURE__*/React.createElement("div", {
  className: createClassNames(['col-xs-12', 'col-sm-10', 'col-sm-offset-1', 'text-xs-center'])
}, /*#__PURE__*/React.createElement(ErrorImage, {
  style: style
}), /*#__PURE__*/React.createElement("h4", {
  className: createClassNames(['h4', 'm-b-1'])
}, /*#__PURE__*/React.createElement(ErrorMessage, {
  unsupportedType: errorType,
  messageLabel: "title"
})), /*#__PURE__*/React.createElement("p", {
  className: createClassNames(['small'])
}, /*#__PURE__*/React.createElement(ErrorMessage, {
  unsupportedType: errorType,
  messageLabel: "body",
  maxAmountCollected: maxAmountCollected,
  source: source
})), errorType === 'UNSUPPORTED_AMOUNT' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: createClassNames(['row', 'col-sm-8', 'col-sm-offset-2'])
}, /*#__PURE__*/React.createElement("button", {
  className: "btn btn-default btn-block",
  type: "submit",
  onClick: () => onClickToSeeAnAvailableComparison(maxAmountCollected)
}, /*#__PURE__*/React.createElement(FormattedMessage, {
  values: {
    maxAmountCollected,
    source
  },
  id: "compare-button"
}))))));
ErrorTemplate.propTypes = {
  style: PropTypes.shape({
    // TODO
  }).isRequired,
  source: PropTypes.string.isRequired,
  errorType: PropTypes.oneOf(['UNSUPPORTED_AMOUNT', 'UNSUPPORTED_ROUTE', 'EXCEPTION']).isRequired,
  createClassNames: PropTypes.func.isRequired,
  maxAmountCollected: PropTypes.number,
  onClickToSeeAnAvailableComparison: PropTypes.func
};
ErrorTemplate.defaultProps = {
  maxAmountCollected: null,
  onClickToSeeAnAvailableComparison: () => {}
};

export { Disclaimer$1 as D, ErrorTemplate as E, injectTheme as i, timeAgoFrom as t };
//# sourceMappingURL=ErrorTemplate-28d6d334.js.map
