Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import {
    Para,
    Header,
    AccordianElement,
    Accordian,
    DataTable,
    Row,
} from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState, Util } from '@d-lift/core';
import webService from '@/Services/WebService';

const QuestionResponse = ({}) => {
    const [selectedStateDesc] = useAppState('selectedStateDesc', '');
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [originalCollectionData, setOriginalCollectionData] = useAppState(
        'originalCollectionData',
        undefined,
    );

    useEffect(() => {
        getRfiCollection();
    }, []);

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            //const response = await webService.fetchRfiCollection();
            let response = {
                catalogId: 1,
                title: 'State Summary RFI Collection Title',
                description:
                    'This is the description text for this RFI Collection. Do not display if empty, null, or blank.',
                rfiDetails: [
                    {
                        id: 123,
                        title: 'State-overview screen RFI collection json',
                        description: 'Description for State-overview screen RFI collection',
                        programs: 'ALL',
                        category: 'RP',
                        offering: 'EE',
                        questionsList: [
                            {
                                rfiId: 123,
                                id: 456,
                                question: 'Question 2 State-overview screen',
                                description: 'Description for Question 2 State-overview screen',
                                answers: [
                                    {
                                        quesnId: 456,
                                        id: 789,
                                        answer: 'YGKJ',
                                        state: 'CA',
                                        respondDt: '',
                                    },
                                    {
                                        quesnId: 456,
                                        id: 799,
                                        answer: 'HBbmnbbKLJHLKJN',
                                        state: 'LA',
                                        respondDt: '',
                                    },
                                ],
                            },
                            {
                                rfiId: 124,
                                id: 436,
                                question: 'Question 1 State-overview screen',
                                description: 'Description for Question 1 State-overview screen',
                                answers: [
                                    {
                                        quesnId: 436,
                                        id: 709,
                                        answer: 'nmbvm',
                                        state: 'AK',
                                        respondDt: '',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            };
            setCollectionData(response);
            setOriginalCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header className="pt-3 ux-rfi-white-header" size="1">
                            {selectedStateDesc}
                        </Header>
                        <Header header-size="4" className="pt-1 ux-rfi-white-header">
                            {collectionData.title}
                        </Header>
                        <Para className="ux-rfi-white-font">{collectionData.description}</Para>
                    </div>

                    <div className="ux-rfi-light-green-border mt-3">
                        <Accordian id="outer-accordian-2">
                            {collectionData.rfiDetails.map((rfiDetail, index) => (
                                <AccordianElement
                                    key={index}
                                    headerText={rfiDetail.title}
                                    className="font-weight-bold"
                                >
                                    <Row className="col-9 pl-4">
                                        <Para
                                            labelKey="offering"
                                            className="ux-rfi-label-normal font-weight-bold"
                                        ></Para>
                                        {' ' +
                                            Util.getRefTableDescriptionByCode(
                                                ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                                rfiDetail.offering,
                                            )}
                                        <br />
                                        <Para
                                            labelKey="program"
                                            className="ux-rfi-label-normal font-weight-bold"
                                        ></Para>
                                        {' ' +
                                            Util.getRefTableDescriptionByCode(
                                                ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                                rfiDetail.program,
                                            )}
                                        <br />
                                        <Para
                                            labelKey="category"
                                            className="ux-rfi-label-normal font-weight-bold"
                                        ></Para>
                                        {' ' +
                                            Util.getRefTableDescriptionByCode(
                                                ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                                rfiDetail.category,
                                            )}
                                    </Row>
                                    <DataTable
                                        col-data-keys="question,response"
                                        col-default-headers="Question,Response"
                                        datacollection={rfiDetail.questionsList.map(question => ({
                                            question: question.question,
                                            response: question.description,
                                        }))}
                                        keyField="question"
                                        hover="false"
                                        bordered="true"
                                        striped="false"
                                        emptymsg-key="no_records_found"
                                        className="va-contacts-table"
                                    />
                                </AccordianElement>
                            ))}
                        </Accordian>
                    </div>
                </>
            ) : (
                <></>
            )}
        </>
    );
};

export default QuestionResponse;