import React from 'react';
import { Icon } from '@pisell/materials';
import { locales } from '@pisell/utils';
import classnames from 'classnames';
import "./index.less";
var WalletPassHeader = function WalletPassHeader(_ref) {
  var _locales$getText, _locales$getText2, _locales$getText3;
  var customerName = _ref.customerName,
    selectedCount = _ref.selectedCount,
    expiredCount = _ref.expiredCount,
    isCardMode = _ref.isCardMode,
    onExpiredClick = _ref.onExpiredClick,
    onBestSaving = _ref.onBestSaving,
    onClearAll = _ref.onClearAll,
    onToggleDisplayMode = _ref.onToggleDisplayMode;
  return /*#__PURE__*/React.createElement("div", {
    className: "wallet-pass-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "wallet-pass-header-left"
  }, /*#__PURE__*/React.createElement("span", {
    className: "wallet-pass-module-customer-container",
    dangerouslySetInnerHTML: {
      __html: ((_locales$getText = locales.getText('wallet-pass-module-cards-vouchers-in-wallet')) === null || _locales$getText === void 0 ? void 0 : _locales$getText("<span class=\"theme-color wallet-pass-module-customer\">".concat(customerName, "</span>"))) || ''
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      color: '#475467'
    }
  }, (_locales$getText2 = locales.getText('wallet-pass-module-applied')) === null || _locales$getText2 === void 0 ? void 0 : _locales$getText2(selectedCount)), /*#__PURE__*/React.createElement("span", {
    className: classnames('error-color', 'pointer', 'underline'),
    onClick: onExpiredClick
  }, (_locales$getText3 = locales.getText('wallet-pass-module-expired')) === null || _locales$getText3 === void 0 ? void 0 : _locales$getText3(expiredCount))), /*#__PURE__*/React.createElement("div", {
    className: "wallet-pass-header-right"
  }, /*#__PURE__*/React.createElement("span", {
    className: classnames('theme-color', 'pointer', 'underline'),
    onClick: onBestSaving
  }, locales.getText('wallet-pass-module-best-saving')), /*#__PURE__*/React.createElement("span", {
    className: classnames('error-color', 'pointer', 'underline'),
    onClick: onClearAll
  }, locales.getText('wallet-pass-module-clear-all')), /*#__PURE__*/React.createElement("div", {
    onClick: onToggleDisplayMode,
    className: "wallet-pass-header-right-icon-container"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "pisell2-chevron-up",
    className: classnames('wallet-pass-header-right-icon', 'theme-color', 'pointer', {
      rotated: !isCardMode
    })
  }))));
};
export default WalletPassHeader;