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); }
import React, { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import BaseModal from '../base-modal';
import Provider from '../../atom/provider';
import { COLORS } from '../../variables/colors';
import InputText from '../../atom/input-text';
import TextArea from '../../atom/input-textarea';
import style from './style.css';
const renderInputGroup = ({
  title,
  inputProps,
  textAreaProps,
  disabled
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: style.inputGroup
  }, /*#__PURE__*/React.createElement("div", {
    className: style.title
  }, title), /*#__PURE__*/React.createElement(InputText, _extends({}, inputProps, {
    disabled: disabled
  })), /*#__PURE__*/React.createElement(TextArea, _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 = useCallback(() => {
    onCancel();
  }, [onCancel]);
  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);
  const footer = useMemo(() => {
    const cancelButton = {
      onCancel: handleCancel,
      label: translate(readOnly ? 'close' : 'cancel')
    };
    return {
      cancelButton,
      ...(!readOnly && {
        confirmButton: {
          onConfirm,
          label: translate('confirm'),
          iconName: 'plus',
          disabled,
          color: COLORS.cm_primary_blue
        }
      })
    };
  }, [handleCancel, onConfirm, translate, readOnly, disabled]);
  if (!isOpen) return null;
  return /*#__PURE__*/React.createElement(BaseModal, {
    title: translate('translation_title'),
    description: translate('translation_description'),
    isOpen: isOpen,
    onClose: handleClose,
    footer: footer,
    headerIcon: {
      name: 'language',
      backgroundColor: '#D6E6FF'
    },
    detectScrollbar: detectScrollbar
  }, /*#__PURE__*/React.createElement("div", {
    className: style.translationModal
  }, /*#__PURE__*/React.createElement("div", {
    className: style.horizontalSection
  }, renderInputGroup({
    title: inputLanguage,
    inputProps: sourceInputText,
    textAreaProps: sourceTextArea,
    disabled: true
  }), /*#__PURE__*/React.createElement("div", {
    className: style.separator
  }), renderInputGroup({
    title: outputLanguage,
    inputProps: targetInputText,
    textAreaProps: targetTextArea,
    disabled: readOnly
  }))));
};
TranslationModal.contextTypes = {
  translate: Provider.childContextTypes.translate
};
TranslationModal.propTypes = process.env.NODE_ENV !== "production" ? {
  isOpen: PropTypes.bool,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  onClose: PropTypes.func,
  disabled: PropTypes.bool,
  source: PropTypes.shape({
    inputText: PropTypes.shape({
      ...InputText.propTypes,
      theme: PropTypes.string
    }),
    textArea: PropTypes.shape({
      ...TextArea.propTypes,
      theme: PropTypes.string
    }),
    inputLanguage: PropTypes.string
  }),
  target: PropTypes.shape({
    inputText: PropTypes.shape({
      ...InputText.propTypes,
      theme: PropTypes.string
    }),
    textArea: PropTypes.shape({
      ...TextArea.propTypes,
      theme: PropTypes.string
    }),
    language: PropTypes.string
  }),
  readOnly: PropTypes.bool
} : {};
export default TranslationModal;
//# sourceMappingURL=index.js.map