Untitled

import React, { useState, useEffect } from 'react';
import {
    Accordian,
    AccordianElement,
    Label,
    Button,
    Modal,
    Para,
    Selectbox,
    Group,
    Textarea,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';
import { useAppState, Lift, AppContext, Util } from '@d-lift/core';
import webService from '@/Services/WebService';
import rfiUtil from '@/Util/RFIUtil';
import ConstantKeys from '@/Constants/ConstantKeys';

const Questions = ({ responseData, updateResponseData }) => {
    const [openModal, setOpenModal] = useAppState('openModal', false);
    const [responseModal, setResponseModal] = useAppState('responseModal', {
        state: '',
        answer: '',
    });
    const [currentQuestion, setCurrentQuestion] = useState(null);
    const [editMode, setEditMode] = useState({ questionId: null, answerId: null });
    const [filteredStates, setFilteredStates] = useAppState('filteredStates', []);

    const refTableContent = rfiUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES,
    );

    useEffect(() => {
        const stateList = rfiUtil.getAuthorizedStateList();
        if (refTableContent) {
            const filteredStateValues = refTableContent.STATE.filter((state) =>
                stateList.includes(state.CODE),
            );
            setFilteredStates(filteredStateValues);
        }
    }, []);

    const getStateDsc = (stateCode) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, stateCode);
    };

    const showResponseModal = (question) => {
        setCurrentQuestion(question);
        setResponseModal({ state: '', answer: '' });
        setOpenModal(true);
        AppContext.pagedetails.getPageContext().clearValidations();
    };

    const hideResponseModal = () => {
        setOpenModal(false);
        setResponseModal({ state: '', answer: '' });
        setCurrentQuestion(null);
    };

    const handleSubmitResponse = async () => {
        try {
            const existingAnswer = currentQuestion.answers.find(
                (answer) => answer.state === responseModal.state
            );

            if (existingAnswer) {
                Lift.Application.Notification.error(
                    'Response from state already exist, please modify your response.'
                );
                return;
            }

            Lift.spinner.show();

            const responseRequest = {
                quesnId: currentQuestion.id,
                id: '',
                answer: responseModal.answer,
                state: responseModal.state,
            };

            const response = await webService.submitRFIResponse({
                requestBody: responseRequest,
            });

            if (response.message.code === 200) {
                const updatedQuestions = responseData.questions.map((question) => {
                    if (question.id === currentQuestion.id) {
                        const answers = question.answers ? [...question.answers, responseRequest] : [responseRequest];
                        return {
                            ...question,
                            answers: answers,
                        };
                    }
                    return question;
                });

                const updatedResponseObject = {
                    ...responseData,
                    questions: updatedQuestions,
                };

                updateResponseData(updatedResponseObject);

                hideResponseModal();

                Lift.Application.Notification.success('Response saved successfully');
            } else {
                Lift.Application.Notification.error('Response could not be submitted');
            }
        } catch (error) {
            Lift.Application.Notification.error('Response could not be submitted');
        } finally {
            Lift.spinner.hide();
        }
    };

    const toggleEdit = (questionId, answerId, prevAns) => {
        if (prevAns) {
            AppContext.model.setValue('responseModal.answer', prevAns);
        }
        setEditMode((prevState) =>
            prevState.questionId === questionId && prevState.answerId === answerId
                ? { questionId: null, answerId: null }
                : { questionId, answerId },
        );
    };

    const handleSaveResponse = async (id, quesnId, state) => {
        try {
            Lift.spinner.show();

            const saveRequest = {
                id: id,
                quesnId: quesnId,
                answer: responseModal.answer,
                state: state,
            };

            const responseObj = await webService.submitRFIResponse({
                requestBody: saveRequest,
            });

            if (responseObj.message.code === 200) {
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === quesnId) {
                        return {
                            ...question,
                            answers: question.answers.map((answer) =>
                                answer.id === id
                                    ? { ...answer, answer: responseModal.answer }
                                    : answer,
                            ),
                        };
                    }
                    return question;
                });

                const updatedResponseObject = {
                    ...responseData,
                    questions: updatedQuestions,
                };

                updateResponseData(updatedResponseObject);
                toggleEdit(null, null);

                Lift.Application.Notification.success('Response updated successfully');
            } else {
                Lift.Application.Notification.error('Response could not be updated');
            }
        } catch (error) {
            Lift.Application.Notification.error('Response could not be updated');
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData?.questions.map((question, index) => (
                <Accordian id={`outer-accordian-${index}`} key={question.id}>
                    <AccordianElement headerText={question.question}>
                        <Label>{question?.answers?.length} &nbsp Responses:</Label>

                        {question?.answers?.map((answer, aIndex) => (
                            <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}>
                                <AccordianElement headerText={getStateDsc(answer.state)}>
                                    <Para
                                        showIf={
                                            !(
                                                editMode.questionId === question.id &&
                                                editMode.answerId === answer.id
                                            )
                                        }>
                                        {answer.answer}
                                    </Para>

                                    <Textarea
                                        id="response"
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        maxLength="100"
                                        model="responseModal.answer"
                                        placeholderText="Placeholder text"
                                        validationRules="alphaNumericCheck"
                                        errormessages={{
                                            alphaNumericCheck: 'only_alphabets_allowed',
                                        }}
                                        rows="5"
                                        wrap="hard"
                                        onChange={(e) =>
                                            setResponseModal({
                                                ...responseModal,
                                                answer: e.target.value,
                                            })
                                        }></Textarea>
                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-2 mb-2"
                                        labelKey="edit_response"
                                        showIf={
                                            !(
                                                editMode.questionId === question.id &&
                                                editMode.answerId === answer.id
                                            )
                                        }
                                        click={() =>
                                            toggleEdit(question.id, answer.id, answer.answer)
                                        }></Button>

                                    <Button
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        size="small"
                                        className="ux-rfi-white-button-bold float-left mt-2 mb-2"
                                        click={() => toggleEdit(question.id, answer.id)}
                                        labelKey="cancel_btn"></Button>

                                    <Button
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        click={() =>
                                            handleSaveResponse(
                                                answer.id,
                                                answer.quesnId,
                                                answer.state,
                                            )
                                        }
                                        className="ux-rfi-green-button float-right mt-2 mb-2"
                                        labelKey="save_response"></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-2 mb-2"
                            labelKey="respond_question"
                            click={() => showResponseModal(question)}></Button>
                    </AccordianElement>
                </Accordian>
            ))}

            <Modal isOpen={openModal}>
                <Group width="3,4">
                    <Label labelKey="respond_as" />

                    <Selectbox
                        id="respond_as"
                        model="responseModal.state"
                        defaultOptionLabelKey="select_state"
                        list="filteredStates"
                        optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                        optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                        defaultOption="true"
                        onChange={(e) =>
                            setResponseModal({ ...responseModal, state: e.target.value })
                        }></Selectbox>
                </Group>
                <Label labelKey="response"></Label>
                <Textarea
                    id="response"
                    maxLength="100"
                    model="responseModal.answer"
                    placeholderText="Placeholder text"
                    validationRules="alphaNumericCheck"
                    errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                    rows="5"
                    wrap="hard"
                    onChange={(e) =>
                        setResponseModal({ ...responseModal, answer: e.target.value })
                    }></Textarea>
                <Group>
                    <Button
                        size="small"
                        className="ux-rfi-white-button-bold float-left mt-3"
                        click={hideResponseModal}
                        labelKey="cancel_btn"></Button>
                    <Button
                        size="small"
                        className="ux-rfi-green-button float-right mt-3"
                        click={handleSubmitResponse}
                        labelKey="submit_ans_btn"></Button>
                </Group>
            </Modal>
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.object.isRequired,
    updateResponseData: PropTypes.func.isRequired,
};

export default Questions;