import React from 'react';
import { Alert, Spin } from 'antd';
import { PisellModal, Tag } from '@pisell/materials';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { formatToken } from "../../constants";
import "./index.less";
var DeleteWorkAreaModal = function DeleteWorkAreaModal(_ref) {
  var open = _ref.open,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'desktop' : _ref$variant,
    loading = _ref.loading,
    submitting = _ref.submitting,
    record = _ref.record,
    counts = _ref.counts,
    translation = _ref.translation,
    getText = _ref.getText,
    onClose = _ref.onClose,
    onConfirm = _ref.onConfirm;
  var isPhoneVariant = variant === 'phone';
  var total = counts.smart + counts.dumb + counts.integrated;
  var hasDevices = total > 0;
  var workAreaName = translation(record === null || record === void 0 ? void 0 : record.name) || '';
  return /*#__PURE__*/React.createElement(PisellModal, {
    open: open,
    title: getText('pisell2.saas.device-planning.delete.title'),
    headerDivider: false,
    onCancel: onClose,
    okVisible: !hasDevices,
    okText: getText('pisell2.saas.device-planning.delete.confirm-button'),
    cancelText: getText(hasDevices ? 'pisell2.saas.device-planning.delete.close' : 'pisell2.saas.device-planning.delete.cancel'),
    okButtonProps: {
      danger: true,
      loading: submitting,
      onClick: onConfirm
    },
    cancelButtonProps: {
      disabled: submitting
    },
    destroyOnClose: true,
    maskClosable: false,
    width: 520,
    platform: isPhoneVariant ? 'h5' : undefined,
    mobileModalHeight: isPhoneVariant ? 'auto' : undefined,
    className: "saas-app-device-planning-delete-modal saas-app-device-planning-delete-modal--".concat(variant),
    footer: loading ? null : undefined,
    bodyStyle: {
      padding: '0 24px 24px'
    }
  }, loading ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-delete-modal__loading"
  }, /*#__PURE__*/React.createElement(Spin, null)) : hasDevices ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-delete-modal__body"
  }, /*#__PURE__*/React.createElement(Alert, {
    type: "warning",
    showIcon: true,
    icon: /*#__PURE__*/React.createElement(ExclamationCircleFilled, null),
    message: getText('pisell2.saas.device-planning.delete.block-title'),
    description: formatToken(getText('pisell2.saas.device-planning.delete.block-content'), {
      WorkAreaName: workAreaName
    })
  }), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-delete-modal__label"
  }, getText('pisell2.saas.device-planning.delete.devices-label')), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-delete-modal__counts"
  }, counts.smart > 0 ? /*#__PURE__*/React.createElement(Tag, null, formatToken(getText('pisell2.saas.device-planning.delete.smart-count'), {
    N: counts.smart
  })) : null, counts.dumb > 0 ? /*#__PURE__*/React.createElement(Tag, null, formatToken(getText('pisell2.saas.device-planning.delete.dumb-count'), {
    N: counts.dumb
  })) : null, counts.integrated > 0 ? /*#__PURE__*/React.createElement(Tag, null, formatToken(getText('pisell2.saas.device-planning.delete.integrated-count'), {
    N: counts.integrated
  })) : null)) : /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-delete-modal__confirm"
  }, formatToken(getText('pisell2.saas.device-planning.delete.confirm'), {
    WorkAreaName: workAreaName
  })));
};
export default DeleteWorkAreaModal;