import React from 'react';
import { List } from 'antd';
import { Icon, PisellModal } from '@pisell/materials';
import classNames from 'classnames';
var usageOptions = ['label', 'wristband'];
var PrinterUsageModal = function PrinterUsageModal(_ref) {
  var state = _ref.state,
    variant = _ref.variant,
    submitting = _ref.submitting,
    getText = _ref.getText,
    onClose = _ref.onClose,
    onSelect = _ref.onSelect;
  if (!state) return null;
  var isPhone = variant === 'phone';
  return /*#__PURE__*/React.createElement(PisellModal, {
    open: true,
    title: getText('pisell2.saas.app-peripheral.print-usage-title'),
    headerDivider: false,
    footerDivider: false,
    okVisible: false,
    cancelText: getText('pisell2.saas.app-peripheral.cancel'),
    cancelButtonProps: {
      block: true,
      size: 'large',
      type: 'default',
      disabled: submitting,
      onClick: onClose
    },
    width: 520,
    platform: isPhone ? 'h5' : undefined,
    mobileModalHeight: isPhone ? 'auto' : undefined,
    className: classNames('saas-app-peripheral-usage-modal', {
      'saas-app-peripheral-usage-modal--phone': isPhone
    }),
    destroyOnClose: true,
    maskClosable: !submitting,
    onCancel: function onCancel() {
      if (submitting) return;
      onClose();
    }
  }, /*#__PURE__*/React.createElement(List, {
    className: "saas-app-peripheral-usage-modal__list",
    dataSource: usageOptions,
    renderItem: function renderItem(usage) {
      return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", {
        role: "button",
        tabIndex: submitting ? -1 : 0,
        "aria-disabled": submitting,
        className: classNames('saas-app-peripheral-usage-modal__option', {
          'is-disabled': submitting
        }),
        onClick: function onClick() {
          if (submitting) return;
          onSelect(usage);
        },
        onKeyDown: function onKeyDown(event) {
          if (submitting) return;
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            onSelect(usage);
          }
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        type: usage === 'label' ? 'TagOutlined' : 'PrinterOutlined'
      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, getText("pisell2.saas.app-peripheral.print-usage.".concat(usage))), /*#__PURE__*/React.createElement("span", null, getText("pisell2.saas.app-peripheral.print-usage.".concat(usage, "-desc"))))));
    }
  }));
};
export default PrinterUsageModal;