Untitled

import React, { FC } from 'react';
import { FieldArray, Form, Formik, FormikValues } from 'formik';
import Box from '@material-ui/core/Box';
import { populateFormValues } from '@dlp/utils';

import { useApplicationContext } from '../context';
import { FormBlock } from '../../../shared/form-block';
import { TabType } from '../../../../types/tab';
import { defaultValues, productSchema, productTypes } from './constants';
import { Typography } from '@material-ui/core';
import { SelectFormControl } from '@dlp/components';
import Question from './question/Question';

export interface IQuestion {
  type: string;
  answers?: any[];
  label: string;
  value: string;
}

export enum TypeQuestion {
  RadioButton = 'radio',
  Text = 'text',
}

const Product: FC = () => {
  const { draft, onTabChange } = useApplicationContext();
  const initialValues = populateFormValues(draft, defaultValues);

  const handleSave = (): void => {
    onTabChange(TabType.region, TabType.product);
  };

  const getQuestions = (value: string) => {
    return productTypes.find((el) => el.value === value)?.questions;
  };

  return (
    <Formik
      onSubmit={handleSave}
      initialValues={initialValues}
      validationSchema={productSchema}
    >
      {(props) => {
        const questions = getQuestions(props.values.productType as string);
        const onSelectChange = (value: string) => {
          props.values.questions = [];
          props.values.productType = value;
          props.setValues(props.values);
        };

        const getAnswerValue = (index: number) => {
          return (
            (props.values as FormikValues).questions[index] &&
            (props.values as FormikValues).questions[index].answers.value
          );
        };

        const getChildQuestion = (question: IQuestion, index: number) => {
          return (
            question.type === TypeQuestion.RadioButton &&
            getAnswerValue(index) &&
            question.answers &&
            question.answers[Number(getAnswerValue(index))].questions
          );
        };

        return (
          <Form>
            <FormBlock title={'Product Type'} backTo={TabType.employer}>
              <Box mb={6} maxWidth={300}>
                <SelectFormControl
                  onChange={onSelectChange}
                  label=""
                  fieldId="productType"
                  items={productTypes}
                />
              </Box>
              <Box mb={5}>
                <Typography variant="subtitle1">Questionnaire</Typography>
              </Box>
              {questions && (
                <FieldArray name="questions">
                  {() =>
                    questions.map((question: IQuestion, i: number) => {
                      return (
                        <Box mb={6} key={'key' + i}>
                          <Question
                            index={i}
                            question={question}
                            fieldId={`questions.${i}.answers.value`}
                          />
                          {getChildQuestion(question, i) &&
                            getChildQuestion(question, i).map(
                              (question: IQuestion, j: number) => {
                                return (
                                  <Box key={'key' + j}>
                                    <Question
                                      index={j}
                                      question={question}
                                      fieldId={`questions.${i}.answers.questions.value`}
                                    />
                                  </Box>
                                );
                              }
                            )}
                        </Box>
                      );
                    })
                  }
                </FieldArray>
              )}
            </FormBlock>
          </Form>
        );
      }}
    </Formik>
  );
};

export default Product;