"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _baseModal = _interopRequireDefault(require("../base-modal"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _colors = require("../../variables/colors");
var _inputText = _interopRequireDefault(require("../../atom/input-text"));
var _inputTextarea = _interopRequireDefault(require("../../atom/input-textarea"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const renderInputGroup = ({
  title,
  inputProps,
  textAreaProps,
  disabled
}) => {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.inputGroup
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.title
  }, title), /*#__PURE__*/_react.default.createElement(_inputText.default, _extends({}, inputProps, {
    disabled: disabled
  })), /*#__PURE__*/_react.default.createElement(_inputTextarea.default, _extends({}, textAreaProps, {
    disabled: disabled
  })));
};
const TranslationModal = (props, context) => {
  const {
    isOpen,
    onCancel,
    onConfirm,
    onClose,
    disabled = false,
    source: {
      inputText: sourceInputText,
      textArea: sourceTextArea,
      inputLanguage
    },
    target: {
      inputText: targetInputText,
      textArea: targetTextArea,
      language: outputLanguage
    },
    readOnly = false
  } = props;
  const {
    translate
  } = context;
  const detectScrollbar = true;
  const handleCancel = (0, _react.useCallback)(() => {
    onCancel();
  }, [onCancel]);
  const handleClose = (0, _react.useCallback)(() => {
    onClose();
  }, [onClose]);
  const footer = (0, _react.useMemo)(() => {
    const cancelButton = {
      onCancel: handleCancel,
      label: translate(readOnly ? 'close' : 'cancel')
    };
    return {
      cancelButton,
      ...(!readOnly && {
        confirmButton: {
          onConfirm,
          label: translate('confirm'),
          iconName: 'plus',
          disabled,
          color: _colors.COLORS.cm_primary_blue
        }
      })
    };
  }, [handleCancel, onConfirm, translate, readOnly, disabled]);
  if (!isOpen) return null;
  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
    title: translate('translation_title'),
    description: translate('translation_description'),
    isOpen: isOpen,
    onClose: handleClose,
    footer: footer,
    headerIcon: {
      name: 'language',
      backgroundColor: '#D6E6FF'
    },
    detectScrollbar: detectScrollbar
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.translationModal
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.horizontalSection
  }, renderInputGroup({
    title: inputLanguage,
    inputProps: sourceInputText,
    textAreaProps: sourceTextArea,
    disabled: true
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.separator
  }), renderInputGroup({
    title: outputLanguage,
    inputProps: targetInputText,
    textAreaProps: targetTextArea,
    disabled: readOnly
  }))));
};
TranslationModal.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
TranslationModal.propTypes = process.env.NODE_ENV !== "production" ? {
  isOpen: _propTypes.default.bool,
  onCancel: _propTypes.default.func,
  onConfirm: _propTypes.default.func,
  onClose: _propTypes.default.func,
  disabled: _propTypes.default.bool,
  source: _propTypes.default.shape({
    inputText: _propTypes.default.shape({
      ..._inputText.default.propTypes,
      theme: _propTypes.default.string
    }),
    textArea: _propTypes.default.shape({
      ..._inputTextarea.default.propTypes,
      theme: _propTypes.default.string
    }),
    inputLanguage: _propTypes.default.string
  }),
  target: _propTypes.default.shape({
    inputText: _propTypes.default.shape({
      ..._inputText.default.propTypes,
      theme: _propTypes.default.string
    }),
    textArea: _propTypes.default.shape({
      ..._inputTextarea.default.propTypes,
      theme: _propTypes.default.string
    }),
    language: _propTypes.default.string
  }),
  readOnly: _propTypes.default.bool
} : {};
var _default = exports.default = TranslationModal;
//# sourceMappingURL=index.js.map