Untitled

import React, { useEffect } from 'react';
import { withPage, Lift, useAppState, Util } from '@d-lift/core';
import BodySection from '@/Layout/BodySection';
import webService from '@/Services/WebService';
import Questions from './Components/Questions';
import RFIDetails from './Components/RFIDetails';
import { Page } from '@d-lift/uxcomponents';
import './response.scss';
import Moment from 'moment';

const RFIResponse = () => {
    const [responseData, setResponseData] = useAppState('responseData', false);
    const [rfi, setRfi] = useAppState('rfi');
    const [responseStats, setResponseStats] = useAppState('responseStats', '');
    const [updatedDueDt, setUpdatedDueDt] = useAppState('updatedDueDt', '');

    const updateResponseData = (newResponseData) => {
        setResponseData(newResponseData);
    };

    useEffect(() => {
        if (rfi) {
            loadResponseData(rfi);

            const dueDate = formatDueDate(rfi.dueDT);
            setUpdatedDueDt(dueDate);
        }
    }, [rfi]);

    useEffect(() => {
        if (responseData) {
            const stats = calculateResponseStats(responseData.questions);
            setResponseStats(stats);
        }
    }, [responseData]);

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

            const response = await webService.getFullDetails({
                requestBody: { rfiId: rfi?.id },
            });

            if (response) {
                updateResponseData(response);
                Lift.Application.Notification.success('Response Data loaded successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    const formatDueDate = (dueDT) => {
        const dueDate = Moment(dueDT).format('MMM DD, yyyy');

        const parsedDueDate = new Date(dueDT);
        const today = new Date();
        const timeDifference = parsedDueDate - today;

        const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

        let dueDateText;
        if (daysDifference === 1) {
            dueDateText = `${dueDate} (${daysDifference} day)`;
        } else if (daysDifference > 1) {
            dueDateText = `${dueDate} (${daysDifference} days)`;
        } else if (daysDifference === 0) {
            dueDateText = `${dueDate} (today)`;
        } else if (daysDifference === -1) {
            dueDateText = `${dueDate} (${Math.abs(daysDifference)} day exceeded)`;
        } else if (daysDifference < -1) {
            dueDateText = `${dueDate} (${Math.abs(daysDifference)} days exceeded)`;
        } else {
            dueDateText = `${dueDate} (${daysDifference} days)`;
        }

        return dueDateText;
    };

    const calculateResponseStats = (data) => {
        const totalQuestions = data.length;
        const answeredQuestions = data.filter((q) => q?.answers && q?.answers.length > 0).length;
        const percentageAnswered =
            totalQuestions > 0 ? (answeredQuestions / totalQuestions) * 100 : 0;
        return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`;
    };

    return (
        <Page ref-table-list="OFFERING,STATE,PROGRAM,CATEGORY">
            <BodySection>
                {rfi && (
                    <RFIDetails
                        rfi={rfi}
                        responseStats={responseStats}
                        updatedDueDt={updatedDueDt}
                    />
                )}
                {responseData && (
                    <Questions
                        responseData={responseData.questions}
                        updateResponseData={updateResponseData}></Questions>
                )}
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);