Untitled

import BodySection from '@/Layout/BodySection';
import RightSection from '@/Layout/RightSection';
import { useAppState, withPage, Util } from '@d-lift/core';
import { Page } from '@d-lift/uxcomponents';
import React, { useEffect, useState } from 'react';
import RFIFilters from './Components/RFIFilters';
import RFIRequestForm from './Components/RFIRequestForm';
import './create-rfi.scss';
import ConstantKeys from '@/Constants/ConstantKeys';

const RFIRequest = () => {
    const defaultRFIRequest = {
        title: '',
        reqDescription: '',
        questionsList: [{ question: '', description: '' }],
        requestedBy: '',
        neededBy: '',
        offering: ConstantKeys.DEFAULT_OPTION.OFFERING,
        category: ConstantKeys.DEFAULT_OPTION.CATEGORY,
        programs: ConstantKeys.DEFAULT_OPTION.PROGRAM,
        status: '',
    };

    const [rfiRequest, setRFIRequest] = useAppState('rfiRequest', defaultRFIRequest);
    const [filteredPrograms, setFilteredPrograms] = useState([]);
    const [filteredCategories, setFilteredCategories] = useState([]);
    const [refTableContent, setRefTableContent] = useState(null);

    const updateRFIRequest = (newState) => {
        setRFIRequest(newState);
    };

    useEffect(() => {
        const refTableContent = JSON.parse(Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING));
        setRefTableContent(refTableContent);

        const filterData = (selectedOffering) => {
            if (!refTableContent) return;

            const programs = refTableContent.PROGRAM;
            const categories = refTableContent.CATEGORY;

            const filteredPrograms = programs.filter(program => program[selectedOffering] === 'Y');
            setFilteredPrograms(filteredPrograms);

            const filteredCategories = categories.filter(category => category[selectedOffering] === 'Y');
            setFilteredCategories(filteredCategories);
        };

        filterData(rfiRequest.offering);
    }, [rfiRequest.offering]);

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING">
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        resetRFIRequest={defaultRFIRequest}></RFIRequestForm>
                </BodySection>
                <RightSection>
                    <RFIFilters
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        filteredPrograms={filteredPrograms}
                        filteredCategories={filteredCategories}></RFIFilters>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Make a Request Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIRequest,
);