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 _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

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

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

    const onPageLoadHandler = async () => {
        try {
            Lift.spinner.show();

            const response = await webService.fetchContacts();

            if (response?.data && !_.isEmpty(response?.data)) {
                // Extract unique states from collectionData
                const distinctStates = [
                    ...new Set(collectionData.rfiDetails.map((item) => item.state)),
                ];

                // Filter contacts based on the states present in collectionData
                const filteredContacts = response.data.filter((contact) =>
                    distinctStates.includes(contact.state)
                );

                setOriginalContacts(filteredContacts);
                setContacts(filteredContacts);
            }
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleStateChange = (event) => {
        const selectedState = event.target.value;
        setStateResp({ state: selectedState });

        if (selectedState !== ConstantKeys.DEFAULT_OPTION.LIFT_default) {
            const filteredList = originalContacts.filter((item) => {
                const states = item.state?.split(',');
                return (
                    states?.includes(selectedState) ||
                    !selectedState ||
                    selectedState === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    selectedState === ConstantKeys.REF_VALUE.ALL
                );
            });

            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                selectedState,
            );
            setSelectedStateDesc(selectedStateDescription); // to set collection state name
            renderAnswers(selectedState); // to set the response provided by selected state
        } else {
            setContacts(originalContacts);
            setSelectedStateDesc('');
        }
        setShowContacts(true);
    };

    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="ux-rfi-contact-table">
                <DataTable
                    showIf={showContacts}
                    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,
    setSelectedStateDesc: PropTypes.func.isRequired,
};

export default RespondingState;