Untitled

import React, { useEffect } from 'react';
import { Selectbox, Label, DataTable, Card } from '@d-lift/uxcomponents';
import { Lift, useAppState, Util } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';
import _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

const RespondingState = ({ renderAnswers, collectionData }) => {
    const [originalContacts, setOriginalContacts] = useAppState('originalContacts', undefined);
    const [stateResp, setStateResp] = useAppState('stateResp', { state: undefined });
    const [contacts, setContacts] = useAppState('contacts', []);
    const [showContacts, setShowContacts] = useAppState('showContacts', false);
    const [filteredStates, setFilteredStates] = useAppState('filteredStates', []);
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');

    const refTableContent = RFIUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.REF_TABLES_CACHE,
    );

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

    const onPageLoadHandler = async () => {
        try {
            Lift.spinner.show();
            const response = await webService.fetchContacts();
            if (response?.data && !_.isEmpty(response?.data)) {
                fetchStateList(collectionData);

                let contactList = response.data.filter((contact) =>
                    contact.states.some((state) =>
                        collectionData.rfiDetails.some((item) => item.state === state)
                    )
                ).map((item) => {
                    return {
                        email: item.pocId,
                        name: item.firstName + ' ' + item.lastName,
                    };
                });
                
                contactList = contactList.sort((a, b) => a.email.localeCompare(b.email));
                setOriginalContacts(contactList);
                setContacts(contactList);
            }
            setShowContacts(true);
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const fetchStateList = (collectionData) => {
        // Extract unique states from collectionData
        const distinctStatesValues = [
            ...new Set(collectionData.rfiDetails.map((item) => item.state))
        ];

        // If refTableContent exists, filter the states
        if (refTableContent) {
            const distinctStatesList = refTableContent.STATE?.filter((state) =>
                distinctStatesValues?.includes(state.CODE)
            );

            // Check if 'ALL' is included and add it to the list if necessary
            if (distinctStatesValues?.includes(ConstantKeys.REF_VALUE.ALL)) {
                distinctStatesList.push({
                    CODE: ConstantKeys.REF_VALUE.ALL,
                    DESCRIPTION: ConstantKeys.CONTEXT_KEYS.ALL_LOWERCASE,
                });
            }

            // Set the filtered states sorted by description
            setFilteredStates(
                distinctStatesList.sort((a, b) => a.DESCRIPTION.localeCompare(b.DESCRIPTION))
            );
        }
    };

    const handleStateChange = () => {
        setShowContacts(false);
        if (
            !_.isEmpty(originalContacts) &&
            stateResp.state !== ConstantKeys.DEFAULT_OPTION.LIFT_default
        ) {
            let filteredList = [];
            originalContacts.forEach((item) => {
                let state = item.state?.split(',');
                if (
                    state?.includes(stateResp.state) ||
                    !stateResp.state ||
                    stateResp.state === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    stateResp.state === ConstantKeys.REF_VALUE.ALL
                ) {
                    filteredList.push(item);
                }
            });
            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                stateResp.state,
            );
            setSelectedStateDesc(selectedStateDescription); //to set collection state name
            renderAnswers(stateResp.state); //to set the response provided by selected state
        } else {
            setContacts(originalContacts);
            setSelectedStateDesc('');
        }
        setTimeout(() => {
            setShowContacts(true);
        }, 100);
    };

    return (
        <Card className="mt-3 w-100 ux-rfi-grey-bg">
            <Selectbox
                id="state"
                labelKey="state"
                list="filteredStates"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                model="stateResp.state"
                className="w-100"
                defaultOptionLabelKey="select_state"
                defaultOption="true"
                onChange={handleStateChange}
            ></Selectbox>
            <Label labelKey="contacts"></Label>
            <div className="table-add">
                <DataTable
                    col-data-keys="email,name"
                    col-default-headers="Email,Name"
                    datacollection="contacts"
                    keyField="email"
                    hover="false"
                    striped={false}
                    emptymsg-key="no_records_found"
                    className="va-contacts-table"
                    pagination="default"
                    pagination-size-per-page="5"
                />
            </div>
        </Card>
    );
};

RespondingState.propTypes = {
    renderAnswers: PropTypes.func.isRequired,
    collectionData: PropTypes.object.isRequired,
};

export default RespondingState;