static_src/react/issue-wizard/CustomQuestions/CustomQuestionSelector.tsx

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import React from 'react';
import {makeStyles} from '@material-ui/styles';
import SelectMenu from '../SelectMenu.tsx';
import {CustomQuestion, CustomQuestionType} from '../IssueWizardTypes.tsx';
import CustomQuestionInput from './CustomQuestionInput.tsx';
import CustomQuestionTextarea from './CustomQuestionTextarea.tsx';
import {GetSelectMenuOptions} from '../IssueWizardUtils.tsx';

const userStyles = makeStyles({
  head: {
    marginTop: '1.5rem',
    fontSize: '1rem'
  },
  inputArea: {
    width: '100%',
  },
  tip: {
    margin: '0.5rem 0',
  },
});

type Props = {
  question: string,
  tip?: string,
  options: string[],
  subQuestions: CustomQuestion[] | null,
  updateAnswers: Function,
}

export default function CustomQuestionSelector(props: Props): React.ReactElement {

  const classes = userStyles();

  const {question, updateAnswers, options, subQuestions, tip} = props;
  const [selectedOption, setSelectedOption] = React.useState(options[0]);

  const [subQuestion, setSubQuestion] = React.useState(subQuestions? subQuestions[0] : null);

  React.useEffect(() => {
    updateAnswers(options[0]);
  },[]);

  const handleOptionChange = (option: string) => {
    setSelectedOption(option);
    updateAnswers(option);
    const index = options.indexOf(option);
    if (subQuestions !== null) {
      setSubQuestion(subQuestions[index]);
    }
  };

  const updateSubQuestionAnswer = (answer:string) => {
    const updatedAnswer = selectedOption + ' ' + answer;
    updateAnswers(updatedAnswer);
  }
  const optionList = GetSelectMenuOptions(options);

  let renderSubQuestion = null;

  if (subQuestion != null) {
    switch(subQuestion.type) {
      case CustomQuestionType.Input:
        renderSubQuestion =
          <CustomQuestionInput
            question={subQuestion.question}
            updateAnswers={updateSubQuestionAnswer}
          />
        break;
      case CustomQuestionType.Text:
        renderSubQuestion =
            <CustomQuestionTextarea
              question={subQuestion.question}
              tip={subQuestion.tip}
              updateAnswers={updateSubQuestionAnswer}
            />;
        break;
      default:
        break;
    }
  }

  const getQuestionInnerHtml = () => {
    return {__html: question};
  }

  const getTipInnerHtml = () => {
    return {__html: tip};
  }
  return (
    <>
      <h3 dangerouslySetInnerHTML={getQuestionInnerHtml()} className={classes.head}/>
      {tip? <div dangerouslySetInnerHTML={getTipInnerHtml()} className={classes.tip}/> : null}
      <SelectMenu
        optionsList={optionList}
        selectedOption={selectedOption}
        setOption={handleOptionChange}
      />
      {renderSubQuestion}
    </>
  );
}