Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { AppContext, Lift, useAppState, Util, Navigate } from '@d-lift/core';
import {
    Button,
    Section,
    LineBreak,
    Checkbox,
    CheckboxGroup,
    DataTable,
    Group,
    Header,
    Label,
    NavLink,
    Textbox,
    UX,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import '../my-rfis.scss';
import RFIUtil from '@/Util/RFIUtil';
import App from '@/App/App';

const MyRFIDashboard = ({ myRFI }) => {
    const myRFIData = {
        RFISubmittedTable: [
            {
                title: 'This is an RFI title. Probably too long',
                openedDue: 'JUN 05, 2024 \nJUN 30, 2024',
                offering: 'E & E',
                program: 'SNAP',
                category: 'Eligibility',
                responded: '11 of 30',
                status: 'Open',
                id: 'dt01',
            },
            {
                title: 'Losing at Nerd Night Trivia',
                openedDue: 'APR 10, 2024 \nMAY 01, 2024',
                offering: 'E & E',
                program: 'LIHEAP',
                category: 'Front Office',
                responded: '28 of 30',
                status: 'Incomplete',
                id: 'dt02',
            },
            {
                title: 'Requirement for Sealab Staffing',
                openedDue: 'JAN 30, 2024 \nFEB 01, 2024',
                offering: 'Child Welfare',
                program: 'The no acronym program',
                category: 'Interfaces',
                responded: '30 of 30',
                status: 'Completed',
                id: 'dt03',
            },
        ],
        RFIRequireAttentionTable: [
            {
                due: 'JUN 30,2024',
                title: 'This is an RFI Title. Probably too long.',
                offering: 'E & E',
            },
            {
                due: 'MAY 01, 2024',
                title: 'Losing at Nerd Night Trivia',
                offering: 'E & E',
            },
            {
                due: 'FEB 01, 2024',
                title: 'Requirements for Sealab staffing',
                offering: 'Child Welfare',
            },
            {
                due: 'FEB 01, 2024',
                title: '01234567 9001234556 890012 456789001234556789001 34567890 12345567890012345 7890012345 67890012 456789001 3455 7890',
                offering: 'Child Welfare',
            },
        ],
        RFISubmittedResponse: [
            {
                RFITitle: 'abcd',
                RFIId: '123',
                questions: [
                    {
                        title: 'What is air speed velocity of unladen swallow?',
                        submitted: 'MAY 14,2024',
                        offering: 'E & E',
                        program: 'E & E',
                        category: 'Eligibility',
                        replies: '2 of 3',
                        id: 'res01',
                    },
                    {
                        title: 'What is your tesch stack?',
                        submitted: 'MAY 14,2024',
                        offering: 'E & E',
                        program: 'E & E',
                        category: 'Eligibility',
                        replies: '2 of 3',
                        id: 'res01',
                    },
                    {
                        title: '012345 678901 234 566777 8891233 5567 8890 122334',
                        submitted: 'MAY 14,2024',
                        offering: 'E & E',
                        program: 'E & E',
                        category: 'Eligibility',
                        replies: '2 of 3',
                        id: 'res01',
                    },
                ],
            },
            {
                RFITitle: 'abcd2',
                RFIId: '123',
                questions:
                    //List of questions
                    [
                        {
                            title: 'What is air speed velocity of unladen swallow?',
                            submitted: 'MAY 14,2024',
                            offering: 'E & E',
                            program: 'E & E',
                            category: 'Eligibility',
                            replies: '2 of 3',
                            id: 'res01',
                        },
                        {
                            title: 'What is your tesch stack?',
                            submitted: 'MAY 14,2024',
                            offering: 'E & E',
                            program: 'E & E',
                            category: 'Eligibility',
                            replies: '2 of 3',
                            id: 'res01',
                        },
                        {
                            title: '012345 678901 234 566777 8891233 5567 8890 122334',
                            submitted: 'MAY 14,2024',
                            offering: 'E & E',
                            program: 'E & E',
                            category: 'Eligibility',
                            replies: '2 of 3',
                            id: 'res01',
                        },
                    ],
            },
        ],
    };
    useAppState('myRFIData', myRFIData);

    const getTitleLink = (colData, rowData, index) => {
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response">
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getSubmittedTableTitleLink = () => {
        Navigate.to('/response', {
            model: {
                username: 'Source Page UserName', //Not sure
            },
            conifg: {
                displayName: true, //Not sure
            },
        });
    };

    // const getProgramDsc = (colData) => {
    //     if (typeof colData === 'string') {
    //         const programCodes = colData.split(',');
    //         return programCodes
    //             .map((code) =>
    //                 Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, code),
    //             )
    //             .join(', ');
    //     } else {
    //         return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData);
    //     }
    // };

    // const getCategoryDsc = (colData) => {
    //     if (typeof colData === 'string') {
    //         const programCodes = colData.split(',');
    //         return programCodes
    //             .map((code) =>
    //                 Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, code),
    //             )
    //             .join(', ');
    //     } else {
    //         return Util.getRefTableDescriptionByCode(
    //             ConstantKeys.REF_TABLE_NAMES.CATEGORY,
    //             colData,
    //         );
    //     }
    // };

    // const getOfferingDsc = (colData) => {
    //     return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.OFFERING, colData);
    // };

    const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData);
    };

    const getRowStyle = (item) => ({
        border: item.status === 'Incomplete' ? '2px solid red' : 'none',
    });

    const getRowClass = (item) => (item.status === 'Incomplete' ? 'incompleteStatus' : '');

    return (
        <>
            <Button
                id="continue-editing-btn"
                className="ux-rfi-yellow-button"
                labelKey="continue_editing_btn"
                click={getSubmittedTableTitleLink}
            />

            <Header className="pt-3 ux-rfi-font-header" size="2">
                RFIs submitted by team {getStateDsc(myRFI?.state)}:
            </Header>

            <DataTable
                col-data-keys="title,openedDue,offering,program,category,responded,status"
                col-default-headers="Title,Opened Due,Offering,Program,Category,Responded,Status"
                className="dt-container border border-secondary"
                datacollection="myRFIData.RFISubmittedTable"
                keyfield="id"
                hover="false"
                bordered="true"
                striped="true"
                emptymsg-key="no_records"
                responsive={true}
            />

            <Header
                className="pt-3 ux-rfi-font-header"
                size="2"
                labelKey="require_attention"></Header>

            <DataTable
                col-data-keys="due,title,offering"
                col-default-headers="Due,Title,Offering"
                className="dt-container border border-secondary"
                datacollection="myRFIData.RFIRequireAttentionTable"
                customContent={{
                    Title: getTitleLink,
                }}
                keyfield="id"
                hover="false"
                bordered="true"
                striped="true"
                emptymsg-key="no_records"
                responsive={true}
            />

            <Header className="pt-3 ux-rfi-font-header" size="2">
                Responses submitted by team {getStateDsc(myRFI?.state)}:
            </Header>

            <Section>
                {myRFIData.RFISubmittedResponse.map((item, index) =>
                    item.status !== 'Incomplete' ? (
                        <div id={index}>
                            <div className="ux-rfi-response-container">
                                <LineBreak size={1} />
                                <div className="pr-4 pl-1">
                                    <Button
                                        className="ux-rfi-white-button w-100"
                                        mode="link"
                                        click={getSubmittedTableTitleLink}>
                                        {item.RFITitle}
                                    </Button>
                                </div>
                                <div className="p-3">
                                    <DataTable
                                        col-data-keys="title,submitted,offering,program,category,replies"
                                        col-default-headers="Title,Submitted,Offering,Program,Category,Replies"
                                        datacollection={index.id}
                                        className="dt-container bg-white"
                                        emptymsg-key="Empty_message"
                                        keyfield="id"
                                        hover="false"
                                        bordered={true}
                                        striped={false}
                                        responsive={true}
                                        colWidths={5}
                                    />
                                </div>
                            </div>
                            <LineBreak size={1} />
                        </div>
                    ) : null,
                )}
            </Section>
        </>
    );
};

export default MyRFIDashboard;