Untitled

import React, { useState, useEffect } from 'react';
import { withPage, useAppState } from '@d-lift/core';
import webService from '../../Services/WebService';
import {
    Page,
    Header,
    Label,
    Textbox,
    Textarea,
    Button,
    Group,
    Date,
    MultiSelect,
    CheckboxGroup,
    Checkbox,
    Column,
    Row,
    Grid,
} from '@d-lift/uxcomponents';
import RightSection from '@/Layout/RightSection';
import BodySection from '@/Layout/BodySection';
import Questionnaire from '../Components/Questionnaire';
import './create-rfi.scss';

const Home = ({ UXPage, config }) => {
    const offeringList = [
        { label: 'Eligibility and Enrollment', value: 'EE' },
        { label: 'Child Support', value: 'CS' },
        { label: 'Child Welfare', value: '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' },
    ];

    const programList = [
        { label: 'ALL', value: 'AL' },
        { label: 'AU', value: 'AU' },
        { label: 'MA', value: 'MA' },
        { label: 'LIHEAP', value: 'LIHEAP' },
        { label: 'CC', value: 'CC' },
        { label: 'PIPP', value: 'PIPP' },
    ];

    const generateUniqueId = () => {
        return Math.floor(Math.random() * 100 + 1);
    };

    const [questions, setQuestions] = useState([
        { id: generateUniqueId(), question: '', description: '' },
    ]);

    const [RFIRequest, setRFIRequest] = useAppState('RFIRequest');
    
    const [selectedCategories, setSelectedCategories] = useState(['AL']);
    const [selectedPrograms, setSelectedPrograms] = useState(['AL']);

    const handleAddQuestion = () => {
        setQuestions([...questions, { id: generateUniqueId(), question: '', description: '' }]);
    };

    const handleInputChange = (index, name, value) => {
        const newQuestions = [...questions];
        newQuestions[index][name] = value;
        setQuestions(newQuestions);
    };

    const handleDeleteQuestion = (id) => {
        const questionToDelete = questions.find((q) => q.id === id);
        if (questionToDelete.saved) {
            deleteQuestionFromDatabase(id);
        } else {
            setQuestions(questions.filter((q) => q.id !== id));
        }
    };

    const deleteQuestionFromDatabase = async (id) => {
        try {
            // Your delete request logic here
            // Example:
            await webService.deleteRFIQuesion(`/questions/${id}`);
            setQuestions(questions.filter((q) => q.id !== id));
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        }
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted data', questions);
        // Add your save logic here
    };

    const handleCategoryChange = (selected) => {
        if (selected.includes('AL')) {
            setSelectedCategories(['AL']);
        } else {
            setSelectedCategories(selected);
        }
    };

    const handleProgramChange = (selected) => {
        if (selected.includes('AL')) {
            setSelectedPrograms(['AL']);
        } else {
            setSelectedPrograms(selected);
        }
    };

    useEffect(() => {
        if (selectedCategories.length > 1 && selectedCategories.includes('AL')) {
            setSelectedCategories(['AL']);
        }
        if (selectedPrograms.length > 1 && selectedPrograms.includes('AL')) {
            setSelectedPrograms(['AL']);
        }
    }, [selectedCategories, selectedPrograms]);

    return (
        <Page>
            <div className="d-flex">
                <BodySection>
                    <Header size="2" labelKey="request_header"></Header>
                    <Textbox
                        name="title"
                        model="RFIRequest.title"
                        placeholder="Placeholder text"
                        labelKey="title"
                        className="pt-4">
                    </Textbox>

                    <Textarea
                        id="noresize"
                        maxLength="100"
                        model="RFIRequest.reqDescription"
                        placeholderText="Placeholder text"
                        rows="5"
                        wrap="hard"
                        labelKey="request_desc">
                    </Textarea>

                    {questions.map((q, index) => (
                        <Questionnaire
                            key={q.id}
                            index={index}
                            question={q.question}
                            description={q.description}
                            onInputChange={handleInputChange}
                            onDeleteQuestion={() => handleDeleteQuestion(q.id)}
                        />
                    ))}

                    <div className="pt-4">
                        <Button
                            id="addQues-btn"
                            size="small"
                            className="ux-rfi-green-button"
                            click={handleAddQuestion}
                            labelKey="addQues_btn"></Button>
                    </div>
                    <Grid>
                        <Row className="mt-5 mb-2">
                            <Column className="col-md-4">
                                <Button
                                    id="saveDraft-btn"
                                    size="small"
                                    className="ux-rfi-green-button"
                                    labelKey="save_draft_btn"></Button>
                            </Column>
                            <Column className="align-self-center col-md-4">
                                <Checkbox
                                    id="notification"
                                    labelKey="email_notification"
                                    model="RFIRequest.email_notification"
                                />
                            </Column>
                            <Column className="col-md-4">
                                <Button
                                    id="submit-btn"
                                    size="small"
                                    className="ux-rfi-green-button float-right"
                                    click={handleSubmit}
                                    labelKey="submit_btn"></Button>
                            </Column>
                        </Row>
                    </Grid>
                </BodySection>

                <RightSection>
                    <MultiSelect
                        id="requestedBy"
                        labelKey="requesting_as"
                        model="RFIRequest.requestedBy"
                        isMulti={false}
                        className="w-100"
                        placeholder="-Select A State-">
                    </MultiSelect>

                    <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></Date>
                        </div>
                    </Group>

                    <MultiSelect
                        model="RFIRequest.offering"
                        id="offering"
                        isMulti={false}
                        labelKey="offering"
                        className="w-100 pt-3 mt-0"
                        list={offeringList}
                        defaultValue={[offeringList[0]]}></MultiSelect>

                    <div className="ux-rfi-grey-border w-100 mt-3">
                        <Label labelKey="category"></Label>
                        <div className="ux-rfi-grey-border">
                            <CheckboxGroup model="RFIRequest.category" onChange={handleCategoryChange} value={selectedCategories}>
                                {categoryList.map((item) => {
                                    return (
                                        <Checkbox
                                            key={item.value}
                                            text={item.label}
                                            value={item.value}
                                            disabled={selectedCategories.includes('AL') && item.value !== 'AL'}
                                        />
                                    );
                                })}
                            </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" onChange={handleProgramChange} value={selectedPrograms}>
                                {programList.map((item) => {
                                    return (
                                        <Checkbox
                                            key={item.value}
                                            text={item.label}
                                            value={item.value}
                                            disabled={selectedPrograms.includes('AL') && item.value !== 'AL'}
                                        />
                                    );
                                })}
                            </CheckboxGroup>
                        </div>
                    </div>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Home Page',
        ContentManager: true,