import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import trim from 'lodash/fp/trim';
import Html from '../../../../atom/html/index.native';
import Select from '../../../../atom/select-modal/index.native';
import Space from '../../../../atom/space/index.native';
import FreeText from '../../free-text/index.native';
import { useTemplateContext } from '../../../../template/app-review/template-context';
import parseTemplateString from '../../../../util/parse-template-string';
import { BOX_STYLE } from '../../../../variables/shadow';
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,
    ...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 = 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.createElement(View, {
        style: styles.spaced,
        testID: id
      }, /*#__PURE__*/React.createElement(FreeText, {
        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.createElement(View, {
        style: styles.spaced,
        testID: id
      }, /*#__PURE__*/React.createElement(Select, {
        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.createElement(Html, {
    key: id,
    fontSize: theme.fontSize.regular,
    testID: id,
    style: styles.htmlText
  }, part.value === ' ' ? part.value : trim(part.value || ''));
};
const QuestionTemplate = props => {
  const {
    template,
    onInputChange,
    choices,
    handleBlur,
    handleFocus,
    focusedSelectId,
    isDisabled = false
  } = props;
  const templateContext = useTemplateContext();
  const {
    theme
  } = templateContext;
  const [styleSheet, setStylesheet] = useState(null);
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!template || !styleSheet) {
    return null;
  }
  const parts = parseTemplateString(template);
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.container,
    testID: "question-template"
  }, parts.map(part => /*#__PURE__*/React.createElement(View, {
    key: `question-part-${part.value}`,
    style: {
      flexDirection: 'row'
    }
  }, /*#__PURE__*/React.createElement(Item, {
    part: part,
    choices: choices,
    focusedSelectId: focusedSelectId,
    isDisabled: isDisabled,
    handleBlur: handleBlur,
    handleFocus: handleFocus,
    onInputChange: onInputChange,
    styles: styleSheet
  }), /*#__PURE__*/React.createElement(Space, {
    type: "micro"
  }))));
};
export default QuestionTemplate;
//# sourceMappingURL=index.native.js.map