Untitled

update the code so that depending on the offering selected and prograramList & categoryList , filter the list of program and category which are present for the selected offering. depending upon the selected offering's code, filter the option in prograramList/categoryList which have value as Y and save that as filteredPrograms/filteredCategory and use them to render check box values for category and program.

prograramList: 
0: {EE: "Y", CS: "N", CODE: "AU", CW: "N", DESCRIPTION: "AU"}
1: {EE: "Y", CS: "N", CODE: "SNAP", CW: "N", DESCRIPTION: "SNAP"}
2: {EE: "Y", CS: "N", CODE: "MA", CW: "N", DESCRIPTION: "MA"}
3: {EE: "Y", CS: "N", CODE: "LIHEAP", CW: "N", DESCRIPTION: "LIHEAP"}
4: {EE: "Y", CS: "N", CODE: "CC", CW: "N", DESCRIPTION: "CC"}
5: {EE: "Y", CS: "N", CODE: "PIPP", CW: "N", DESCRIPTION: "PIPP"}
6: {EE: "Y", CS: "Y", CODE: "ALL", CW: "Y", DESCRIPTION: "ALL"}


categoryList:
0: {EE: "Y", CS: "N", CODE: "FO", CW: "N", DESCRIPTION: "Font Office"}
1: {EE: "Y", CS: "N", CODE: "AL", CW: "N", DESCRIPTION: "All"}
2: {EE: "Y", CS: "N", CODE: "MA", CW: "N", DESCRIPTION: "Macho"}




import ConstantKeys from '@/Constants/ConstantKeys';
import { useAppState, Util } from '@d-lift/core';
import { CheckboxGroup, Date, Group, Label, Selectbox, Checkbox } from '@d-lift/uxcomponents';
import React, { useEffect, useState } from 'react';
import webService from '@/Services/WebService';
import PropTypes from 'prop-types';

const RFIFilters = ({ rfiRequest, updateRFIRequest }) => {
    const [filteredStates, setFilteredStates] = useState([]);
    const [filteredOfferings, setFilteredOfferings] = useState([]);
    const [categoryList, setCategoryList] = useState([]);
    const [prograramList, setPrograramList] = useState([]);
    const [filteredCategory, setFilteredCategory] = useState([]);
    const [filteredPrograms, setFilteredPrograms] = useState([]);

    useEffect(() => {
        const refTableContent = JSON.parse(
            Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING),
        );
        console.log('refTableContent:', refTableContent);

        const loginDetails = getLoginData();
        console.log('loginDetails:', loginDetails);

        if (refTableContent && loginDetails) {
            const stateCodes = loginDetails.map((detail) => detail.state);

            const filteredStateValues = refTableContent.STATE.filter((state) =>
                stateCodes.includes(state.CODE),
            );
            setFilteredStates(filteredStateValues);
            // useAppState('filteredStates', filteredStateValues);
            console.log('filteredStateValues:', filteredStateValues);

            const programs = refTableContent.PROGRAM;
            setPrograramList(programs);
            console.log('programs:', programs);

            const category = refTableContent.CATEGORY;
            setCategoryList(category);
            console.log('category:', category);
            
        }
    }, []);

    const getLoginData = () => {
        // const loginDetails = webService.getLoginDetails({
        //     requestBody: '',
        // });
        return [
            {
                state: 'SS',
                offering: ['EE'],
            },
            {
                state: 'WI',
                offering: ['EE', 'CW'],
            },
            {
                state: 'ND',
                offering: ['EE', 'EF'],
            },
            {
                state: 'MD',
                offering: ['CW'],
            },
            {
                state: 'WY',
                offering: ['CW', 'EF'],
            },
            {
                state: 'AB',
                offering: ['EE', 'CW'],
            },
            {
                state: 'ST',
                offering: ['EE', 'EF'],
            },
            {
                state: 'IN',
                offering: ['EE', 'EF', 'CW'],
            },
            {
                state: 'AL',
                offering: ['EE', 'EF', 'CW'],
            },
            {
                state: 'AK',
                offering: ['EE', 'EF', 'CW'],
            },
            {
                state: 'AS',
                offering: ['EE', 'EF', 'CW'],
            },
        ];
    };

    const getStateValue = (event) => {
        const selectedState = event.target.value;
        const loginDetails = getLoginData();

        const selectedStateDetails = loginDetails.find((detail) => detail.state === selectedState);

        if (selectedStateDetails) {
            const availableOfferings = selectedStateDetails.offering;
            setFilteredOfferings(availableOfferings);

            //useAppState('filteredOfferings', availableOfferings);

            console.log('availableOfferings:', availableOfferings);
        }
    };

    const getOfferingValue = (event) => {
        const selectedOffering = event.target.value;
        const offering = getLoginData();
    };

    const programRefTable = [
        { DESCRIPTION: 'ALL', CODE: 'ALL' },
        { DESCRIPTION: 'AU', CODE: 'AU' },
        { DESCRIPTION: 'MA', CODE: 'MA' },
        { DESCRIPTION: 'LIHEAP', CODE: 'LIHEAP' },
        { DESCRIPTION: 'CC', CODE: 'CC' },
        { DESCRIPTION: 'PIPP', CODE: 'PIPP' },
    ];
    useAppState('programList', programRefTable);

    const categoryRefTable = [
        { DESCRIPTION: 'ALL', CODE: 'ALL' },
        { DESCRIPTION: 'Eligibility', CODE: 'EG' },
        { DESCRIPTION: 'Front Office', CODE: 'FO' },
        { DESCRIPTION: 'Interfaces', CODE: 'IF' },
        { DESCRIPTION: 'Reports', CODE: 'RP' },
        { DESCRIPTION: 'General/Other', CODE: 'GO' },
    ];
    useAppState('categoryList', categoryRefTable);

    // Handler for category selection
    const handleCategoryChange = (event) => {
        const selectedCategory = event.target.value;
        let updatedCategory = [...rfiRequest.category];

        if (selectedCategory === 'ALL') {
            updatedCategory = ['ALL'];
        } else if (updatedCategory.includes('ALL')) {
            updatedCategory = updatedCategory.filter((item) => item !== 'ALL');
        }

        const newList = { ...rfiRequest, category: updatedCategory };
        updateRFIRequest(newList);
    };

    // Handler for program selection
    const handleProgramChange = (event) => {
        const value = event.target.value;
        let selectedPrograms = [...rfiRequest.programs];

        if (value === 'ALL') {
            selectedPrograms = ['ALL'];
        } else if (selectedPrograms.includes('ALL')) {
            selectedPrograms = selectedPrograms.filter((program) => program !== 'ALL');
        }
        const newList = { ...rfiRequest, programs: selectedPrograms };
        updateRFIRequest(newList);
    };

    return (
        <>
            <Label className="pt-3 mandatory_field" labelKey="requesting_as"></Label>

            <Selectbox
                id="requestedBy"
                model="rfiRequest.requestedBy"
                className="w-100"
                defaultOptionLabelKey="select_state"
                list={filteredStates}
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                defaultOption="true"
                required
                change={(event) => getStateValue(event)}></Selectbox>

            <Group width="3,9">
                <Label className="pt-4" labelKey="needed_by"></Label>
                <div className="ux-rfi-calendar">
                    <Date
                        id="neededByDate"
                        model="rfiRequest.neededBy"
                        // className="mandatory_field"
                        // required
                        monthDropdown
                        yearDropdown></Date>
                </div>
            </Group>

            <Selectbox
                id="offering"
                labelKey="offering"
                model="rfiRequest.offering"
                className="ux-w-100 pt-3"
                defaultOption="true"
                // list={filteredOfferings}
                list={filteredOfferings.map((code) => ({
                    CODE: code,
                    DESCRIPTION:
                        code === 'EE'
                            ? 'Eligibility and Enrollment'
                            : code === 'CS'
                            ? 'Child Support'
                            : code === 'CW'
                            ? 'Child Welfare'
                            : 'Unknown',
                }))}
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                change={(event) => getOfferingValue(event)}></Selectbox>

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Label labelKey="category"></Label>
                <div className="ux-rfi-grey-border">
                    <CheckboxGroup model="rfiRequest.category">
                        {categoryRefTable.map((cateegoryItem, index) => (
                            <Checkbox
                                id={'category-item-' + index}
                                text={cateegoryItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                value={cateegoryItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                change={(event) => handleCategoryChange(event)}></Checkbox>
                        ))}
                    </CheckboxGroup>
                </div>
            </div>
            <div className="ux-rfi-grey-border w-100 mt-4 pt-1">
                <Label labelKey="program"></Label>
                <div className="ux-rfi-grey-border">
                    <CheckboxGroup model="rfiRequest.programs">
                        {programRefTable.map((programsItem, index) => (
                            <Checkbox
                                id={'program-item-' + index}
                                text={programsItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                value={programsItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                change={(event) => handleProgramChange(event)}></Checkbox>
                        ))}
                    </CheckboxGroup>
                </div>
            </div>
        </>
    );
};

RFIFilters.propTypes = {
    rfiRequest: PropTypes.object.isRequired,
    updateRFIRequest: PropTypes.func.isRequired,
};

export default RFIFilters;