Untitled

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

const RFIFilters = ({ rfiRequest, updateRFIRequest }) => {
    const offeringList = [
        { DESCRIPTION: 'Eligibility and Enrollment', CODE: 'EE' },
        { DESCRIPTION: 'Child Support', CODE: 'CS' },
        { DESCRIPTION: 'Child Welfare', CODE: 'CW' },
    ];

    const categoryList = [
        { label: 'ALL', value: 'AL' },
        { label: 'Eligibility', value: 'EL' },
        { label: 'Front Office', value: 'FO' },
        { label: 'Interfaces', value: 'IN' },
        { label: 'Reports', value: 'RE' },
        { label: 'General/Other', value: 'GO' },
    ];
    useAppState('categoryList', categoryList);

    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);

    // Ensure rfiRequest.category is always defined as an array
    const currentCategory = rfiRequest.category || [];
    const currentPrograms = rfiRequest.programs || [];

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

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

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

    // Handler for program selection
    const handleProgramChange = (event) => {
        const selectedProgram = event.target.value;
        let updatedPrograms = [...currentPrograms];

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

    return (
        <>
            <Selectbox
                id="requestedBy"
                labelKey="requesting_as"
                model="rfiRequest.requestedBy"
                className="w-100"
                placeholder="-Select A State -"
                list="stateList"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}></Selectbox>

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

            <Selectbox
                model="rfiRequest.offering"
                labelKey="offering"
                list={offeringList}
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                className="ux-w-100 pt-3"
            />

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Label labelKey="category"></Label>
                <div className="ux-rfi-grey-border">
                    <CheckboxGroup model="rfiRequest.category">
                        {categoryList.map((item) => {
                            return (
                                <Checkbox
                                    key={item.value}
                                    text={item.label}
                                    value={item.value}
                                    checked={currentCategory.includes(item.value)}
                                    change={handleCategoryChange}
                                />
                            );
                        })}
                    </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((item) => {
                            return (
                                <Checkbox
                                    key={item.CODE}
                                    text={item.DESCRIPTION}
                                    value={item.CODE}
                                    checked={currentPrograms.includes(item.CODE)}
                                    change={handleProgramChange}
                                />
                            );
                        })}
                    </CheckboxGroup>
                </div>
            </div>
        </>
    );
};

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

export default RFIFilters;