"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _trim = _interopRequireDefault(require("lodash/fp/trim"));
var _index = _interopRequireDefault(require("../../../../atom/html/index.native"));
var _index2 = _interopRequireDefault(require("../../../../atom/select-modal/index.native"));
var _index3 = _interopRequireDefault(require("../../../../atom/space/index.native"));
var _index4 = _interopRequireDefault(require("../../free-text/index.native"));
var _templateContext = require("../../../../template/app-review/template-context");
var _parseTemplateString = _interopRequireDefault(require("../../../../util/parse-template-string"));
var _shadow = require("../../../../variables/shadow");
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; }
const createStyleSheet = theme => ({
  container: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center'
  },
  spaced: {
    paddingVertical: theme.spacing.tiny
  },
  htmlText: {
    color: theme.colors.black,
    fontWeight: theme.fontWeight.bold,
    lineHeight: 25
  },
  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread
  selectInput: {
    padding: theme.spacing.tiny,
    borderRadius: theme.radius.regular,
    minWidth: 175,
    marginHorizontal: 12,
    paddingVertical: 16,
    ..._shadow.BOX_STYLE,
    backgroundColor: theme.colors.white
  },
  selectText: {
    color: theme.colors.gray.medium,
    fontWeight: theme.fontWeight.bold,
    fontSize: theme.fontSize.regular,
    textAlign: 'center'
  }
});
const Item = props => {
  const {
    part,
    isDisabled = false,
    focusedSelectId,
    choices,
    onInputChange,
    handleBlur,
    handleFocus,
    styles
  } = props;
  const templateContext = (0, _templateContext.useTemplateContext)();
  const {
    theme,
    translations
  } = templateContext;
  const inputNames = choices.map(choice => choice.name);
  const id = `question-part-${part.value}`;
  const isFocused = focusedSelectId === id;
  if (part.type === 'answerField' && inputNames.includes(part.value)) {
    const choiceIndex = choices.findIndex(choice => choice.name === part.value);
    const choice = choices[choiceIndex];
    const {
      value
    } = choice;
    if (!choice || !choice.type || !choice.name) {
      return null;
    }
    const disabledSuffix = isDisabled ? '-disabled' : '';
    const selectedSuffix = value ? '-selected' : '';
    const handleInputChange = _item => _value => onInputChange(_item, _value);
    if (choice.type === 'text') {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.spaced,
        testID: id
      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
        key: id,
        isDisabled: isDisabled,
        onChange: handleInputChange(choice),
        value: value,
        testID: `${id}-text${selectedSuffix}${disabledSuffix}`,
        questionType: "template"
      }));
    }
    const selectInputStyle = [styles.selectInput];
    const selectTextStyle = [styles.selectText];
    if (choice.type === 'select') {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.spaced,
        testID: id
      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
        isDisabled: isDisabled,
        questionType: "template",
        values: choice.items,
        value: value,
        placeholder: translations.selectAnAnswer,
        isFocused: isFocused,
        onBlur: handleBlur,
        onFocus: handleFocus(id),
        onChange: handleInputChange(choice),
        textStyle: selectTextStyle,
        style: selectInputStyle,
        analyticsID: `${id}-select${selectedSuffix}${disabledSuffix}`,
        testID: `${id}-select${selectedSuffix}${disabledSuffix}`
      }));
    }
  }
  return /*#__PURE__*/_react.default.createElement(_index.default, {
    key: id,
    fontSize: theme.fontSize.regular,
    testID: id,
    style: styles.htmlText
  }, part.value === ' ' ? part.value : (0, _trim.default)(part.value || ''));
};
const QuestionTemplate = props => {
  const {
    template,
    onInputChange,
    choices,
    handleBlur,
    handleFocus,
    focusedSelectId,
    isDisabled = false
  } = props;
  const templateContext = (0, _templateContext.useTemplateContext)();
  const {
    theme
  } = templateContext;
  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!template || !styleSheet) {
    return null;
  }
  const parts = (0, _parseTemplateString.default)(template);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styleSheet.container,
    testID: "question-template"
  }, parts.map(part => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    key: `question-part-${part.value}`,
    style: {
      flexDirection: 'row'
    }
  }, /*#__PURE__*/_react.default.createElement(Item, {
    part: part,
    choices: choices,
    focusedSelectId: focusedSelectId,
    isDisabled: isDisabled,
    handleBlur: handleBlur,
    handleFocus: handleFocus,
    onInputChange: onInputChange,
    styles: styleSheet
  }), /*#__PURE__*/_react.default.createElement(_index3.default, {
    type: "micro"
  }))));
};
var _default = exports.default = QuestionTemplate;
//# sourceMappingURL=index.native.js.map