Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, AccordianElement, Accordian, DataTable, Row } from '@d-lift/uxcomponents';
import React, { useEffect, useState } 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,
    );
    const [visibleRfi, setVisibleRfi] = useState({});

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

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            //const response = await webService.fetchRfiCollection();
            let response = {
                catalogId: 551,
                title: 'dfsdf',
                description: 'gsdfgsdfgdsfg',
                rfiDetails: [
                    {
                        id: 23601,
                        questionsList: [
                            {
                                rfiId: 23601,
                                id: 36052,
                                question: 'q1',
                                description: 'd1',
                            },
                        ],
                        title: 'rfi',
                        description: 'desc',
                        reqDT: '2024-07-26T11:29:18.130079',
                        state: 'IN',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '08-10-2024',
                        offering: 'EE',
                    },
                    // ... other rfiDetails
                ],
            };
            setCollectionData(response);
            setOriginalCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    const toggleVisibility = (id) => {
        setVisibleRfi((prevState) => ({
            ...prevState,
            [id]: !prevState[id],
        }));
    };

    const getQuestion = (colData, rowData, index) => {
        // how to aaaaaaaaaaaaaaaa
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header
                            className="pt-3 ux-rfi-white-header"
                            size="1"
                            showIf={selectedStateDesc}>
                            {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">
                        <div>
                            {collectionData.rfiDetails.map((rfiDetail, index) => (
                                <div className="main-component ux-rfi-light-green-border" key={rfiDetail.id}>
                                    <Header 
                                        header-size="4" 
                                        preIconClass="fa fa-angle-right" 
                                        style={{ color: 'black', cursor: 'pointer' }}
                                        onClick={() => toggleVisibility(rfiDetail.id)}
                                    >
                                        {rfiDetail.title}
                                    </Header>
                                    {visibleRfi[rfiDetail.id] && (
                                        <div id="hidden-component">
                                            <div className="col-9 pb-3">
                                                <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.programs,
                                                    )}
                                                <br />
                                                <Para
                                                    labelKey="category"
                                                    className="ux-rfi-label-normal font-weight-bold"></Para>
                                                {' ' +
                                                    Util.getRefTableDescriptionByCode(
                                                        ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                                        rfiDetail.category,
                                                    )}
                                            </div>
                                        </div>
                                    )}

                                    <DataTable
                                        col-data-keys="question,response"
                                        col-default-headers="Question,Response"
                                        customContent={{
                                            Question: getQuestion,
                                            //Response: getResponse,
                                        }}
                                        datacollection={rfiDetail.questionsList}
                                        keyField="question"
                                        hover="false"
                                        bordered="true"
                                        striped="false"
                                        emptymsg-key="no_records_found"
                                        className="va-contacts-table"
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                </>
            ) : (
                <></>
            )}
        </>
    );
};

export default QuestionResponse;