Untitled

import React, { useEffect, useRef, useState } from "react";
import { useDispatch } from "react-redux";
import DatePickerKendoRct from "src/control-components/date-picker/date-picker";
import DropDownKendoRct from "src/control-components/drop-down/drop-down";
import TextAreaKendo from "src/control-components/kendo-text-area/kendo-text-area";
import { json } from "stream/consumers";
import { useLocation, useNavigate } from "react-router";
import { clientServices } from "src/services/clientServices";
import { SaveDefaultClientObj } from "src/dataModels/clientDataModel";
import { ClinicDefaultGoalData } from "src/dataModels/clinicResponseModels";
import { loaderAction } from "src/redux/actions";
import moment from "moment";
import TextAreaKendoRct from "src/control-components/text-area/text-area";
import InputKendoRctV1 from "src/control-components/input/inputV1";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { ClientService } from "src/services/clientService";
import MultiSelectDropDown from 'src/control-components/multi-select-drop-down/multi-select-drop-down';



const AddNewDefaultGoals = () => {
    const frequencyData = [
        { key: "Daily", value: "Daily" },
        { key: "Weekly", value: "Weekly" },
        { key: "Monthly", value: "Monthly" },
        { key: "Bi-Monthly", value: "Bi-Monthly" },
        { key: "Semi-Annually", value: "Semi-Annually" },
        { key: "Quarterly", value: "Quarterly" },
        { key: "Yearly", value: "Yearly" },
    ];
    
    let [fields, setFields] = useState(
        {
            staffTypeId: [],
            serviceTypeId: []
        }
    )
    const cletreatmentPlanObj: SaveDefaultClientObj[] = [{ defaultGoalObjective: [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: fields.staffTypeId,serviceTypeIds: fields.serviceTypeId }] }] }]
    const [goalList, setGoalList] = useState<SaveDefaultClientObj[]>(cletreatmentPlanObj)
    const navigate = useNavigate()
    const [errors, setErrors] = useState<any>({ Goalname: '* Goal Name is Required', startDate: "* Start date is required" ,objective:"* Objective is required",interventions:"* Interventions is required",numFreq:"* Frequency is required"});
    const [btnPressed, setBtnPressed] = useState(false)
    const [isEdit, setIsEdit] = useState(false)
    const location = useLocation();
    const dispatch = useDispatch()
    const [tpServicetypes, setTpServiceTypes] = useState([])
    const [isTpFetched, setTpFetched] = useState(false)
    const [tpStaffTypes, setTpStaffTypes] = useState([])


    useEffect(() => {
        setBtnPressed(false)
    }, [goalList])


    useEffect(() => {
        if (!isTpFetched) {
            getTpServicetypes()
            getTpStaffTypes()
            setTpFetched(true)
        }
    }, [isTpFetched])

    const getTpServicetypes = async () => {
        await ClientService.getTpServicetypes()
            .then(result => {
                let TpServicetypes = result?.resultData
                setTpServiceTypes(TpServicetypes)
            }).catch(error => {
                // renderErrors(error);
            });
    }

    const getTpStaffTypes = async () => {
        await ClientService.getTpStaffType()
            .then(result => {
                let TpStaffTypes = result?.resultData
                setTpStaffTypes(TpStaffTypes)
            }).catch(error => {
                // renderErrors(error);
            });
    }

    function renderToItem(li, itemProps) {
        const itemChildren = (
            <span>
                <input
                    type="checkbox"
                    name={itemProps.dataItem}
                    checked={itemProps.selected}
                    onChange={(e) => itemProps.onClick(itemProps.index, e)}
                />
                &nbsp;{li.props.children}
            </span>
        );
        return React.cloneElement(li, li.props, itemChildren);
    }
    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setFields({
            ...fields,
            [name]: value,
        });
    };

    useEffect(() => {
        if (location.state && location.state.id) {
            setIsEdit(true)
            const stateData: ClinicDefaultGoalData = location.state
            const creatorObj: SaveDefaultClientObj = {
                id: stateData.id, goalName: stateData.goalName,
                defaultGoalObjective: stateData.defaultGoalObjective ? stateData.defaultGoalObjective : [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: fields.staffTypeId,serviceTypeIds: fields.serviceTypeId }] }],
                startDate: stateData.startDate && new Date(stateData.startDate),
                endDate: stateData.endDate && new Date(stateData.endDate),
            }
            setGoalList([creatorObj])
        }
    }, [location.state])

    const handleCancel = () => {
        navigate(-1);
    };


    const handleDeleteIntervention = (indexGoal, currentList) => {
        setGoalList(list => list.map((item, i) =>
            i === indexGoal
                ? {
                    ...item,
                    defaultGoalObjective: currentList
                }
                : item
        ));
    }
    const saveGoalsData = async () => {
        setBtnPressed(true);
        if (goalList.length > 0) {
            const newObjectList: any[] = [];
            let isValid = true;
    
            for (const element of goalList) {
                if (!element.goalName?.length || element.goalName.length < 1 || !element.startDate) {
                    isValid = false;
                    break;
                }
                
                const isObjectiveValid = element.defaultGoalObjective?.length > 0 &&
                    element.defaultGoalObjective.every(obj => obj.objective && obj.objective.trim() !== '');
                
                const isInterventionValid = element.defaultGoalObjective?.every(obj => 
                    obj.defaultGoalObjectiveInterventions &&
                    obj.defaultGoalObjectiveInterventions.length > 0 &&
                    obj.defaultGoalObjectiveInterventions.every(int => 
                        int.intervention && 
                        int.intervention.trim() !== '' &&
                        int.numFreq &&
                        int.numFreq.trim() !== ''
                    )
                );
                
                if (!isObjectiveValid || !isInterventionValid) {
                    isValid = false;
                    break;
                }
                

                const preparedElement = {
                    ...element,
                    startDate: moment(element.startDate).format("YYYY-MM-DD"),
                    defaultGoalObjective: (element.defaultGoalObjective ?? []).map(obj => ({
                        ...obj,
                        defaultGoalObjectiveInterventions: (obj.defaultGoalObjectiveInterventions ?? []).map(int => ({
                            ...int,
                            freq:int.freq ?? frequencyData[0].value,
                            staffTypeIds: int.staffTypeIds ?? [],
                            serviceTypeIds: int.serviceTypeIds ?? []
                        }))
                    }))
                };
                
                newObjectList.push(preparedElement);
            }
            
            if (isValid && newObjectList.length > 0) {
                try {
                    dispatch(loaderAction(true));
                    if (isEdit) {
                        await clientServices.updateDefaultGoals(newObjectList);
                    } else {
                        await clientServices.saveClientDefaultGoals(newObjectList);
                    }
                    dispatch(loaderAction(false));
                    handleCancel();
                } catch (error) {
                    dispatch(loaderAction(false));
                }
            } else {
                dispatch(loaderAction(false));
            }
        }
    };

    return (<div>
        <div className="my-4 hrBorder ">
            <div className="d-flex align-items-center justify-content-between">
                <h4 className="address-title text-grey ">
                    <span className="f-24"> {isEdit ? 'Update Default Goal' : 'Add New Default Goals'}</span>
                </h4>

            </div>
            {
                goalList.map((selectedGoal, indexGoal) =>
                    <div className="pieGoal boxSHADOWADD">
                        <div className="row mt-3 borderTop align-items-center">
                            <div className="mb-2 col-lg-6 col-md-6  position-relative" style={{ height: 100 }}>
                                <TextAreaKendo
                                    txtValue={selectedGoal.goalName}
                                    onChange={(handleTextChange) => {
                                        setGoalList(list => list.map((item, i) =>
                                            i === indexGoal
                                                ? {
                                                    ...item,
                                                    goalName: handleTextChange.value!
                                                }
                                                : item
                                        ));
                                    }
                                    }

                                    name="custAuthId"
                                    label="Goal Name"
                                    error={(btnPressed && (!selectedGoal.goalName || selectedGoal.goalName === '')) && errors.Goalname}
                                />
                            </div>

                            <div className="col-lg-2 col-md-4" style={{ height: 110 }}>

                                <DatePickerKendoRct
                                    placeholder=""

                                    value={selectedGoal.startDate && selectedGoal.startDate}
                                    onChange={(selectedClientDate) => {
                                        setGoalList(list => list.map((item, i) =>
                                            i === indexGoal
                                                ? {
                                                    ...item,
                                                    startDate: selectedClientDate.value!
                                                }
                                                : item
                                        ));
                                    }}

                                    title={"Start Date"}
                                    label={"Start Date"}
                                    required={true}
                                    error={(btnPressed && (!selectedGoal.startDate)) && errors.startDate}
                                />
                            </div>

                            <div className="mb-2 col-lg-6 col-md-6 col-6">
                                <TextAreaKendoRct
                                    name="goalDescription"
                                    txtValue={selectedGoal.goalDescription}
                                    onChange={(handleTextChange) => {
                                        setGoalList(list => list.map((item, i) =>
                                            i === indexGoal
                                                ? {
                                                    ...item,
                                                    goalDescription: handleTextChange.value!
                                                }
                                                : item
                                        ));
                                    }}
                                    label="Description"
                                />
                            </div>

                            {/* 
                            <div className="col-lg-2 col-md-4">

                                <DatePickerKendoRct
                                    placeholder=""
                                    value={selectedGoal.endDate && selectedGoal.endDate}
                                    onChange={(selectedClientDate) => {
                                        setGoalList(list => list.map((item, i) =>
                                            i === indexGoal
                                                ? {
                                                    ...item,
                                                    endDate: selectedClientDate.value!
                                                }
                                                : item
                                        ));
                                    }}

                                    title={"End Date"}
                                    label={"End Date"}
                                    required={true}
                                />
                            </div> */}


                            {(!isEdit && goalList.length > 1) && <div className="col-lg-2 col-md-2  col-sm-2 mb-2 ">
                                <button className="btn-transaprent  ">
                                    <i onClick={
                                        () => {
                                            setGoalList(goalList.filter((item, i) => i !== indexGoal));
                                        }
                                    }
                                        className="fa-solid fa-trash cross-red"></i>
                                    {/* 
<i class="fa-solid fa-trash"></i> */}
                                </button>
                            </div>
                            }
                        </div>




                        {/* Here starts the Objective Part */}
                        <div className="pieGoal">
                            {

                                selectedGoal?.defaultGoalObjective?.map((selectedObjective, indexObjective) =>
                                    <div className="row mt-3 borderTop">
                                        <div className="mb-2  col-md-6 col-12 position-relative">
                                            <TextAreaKendo
                                                required={true}
                                                txtValue={selectedObjective.objective}
                                                onChange={(handleTextChange) => {
                                                    const currentObjective = selectedGoal.defaultGoalObjective;
                                                    currentObjective![indexObjective].objective = handleTextChange.value!

                                                    setGoalList(list => list.map((item, i) =>
                                                        i === indexGoal
                                                            ? {
                                                                ...item,
                                                                defaultGoalObjective: currentObjective!
                                                            }
                                                            : item
                                                    ));
                                                }
                                                }
                                                name="custAuthId"
                                                label="Objective"
                                                error={(btnPressed && (!selectedObjective.objective || selectedObjective.objective === '')) && errors.objective}
                                            />

                                            {(!isEdit && selectedGoal.defaultGoalObjective && selectedGoal.defaultGoalObjective.length > 1)
                                                && <button className=" btn-transaprent">
                                                    <i onClick={
                                                        () => {
                                                            const objectivesOfGoal = selectedGoal.defaultGoalObjective;
                                                            const removeIndexedItem = objectivesOfGoal?.filter((item, i) => i !== indexObjective)
                                                            setGoalList(list => list.map((item, i) =>
                                                                i === indexGoal
                                                                    ? {
                                                                        ...item,
                                                                        defaultGoalObjective: removeIndexedItem!
                                                                    }
                                                                    : item
                                                            ));
                                                        }
                                                    }
                                                        className="fa-solid fa-xmark cross-red"></i>
                                                </button>}


                                        </div>

                                        <div className="pieGoal col-md-6 col-12">
                                            {
                                                selectedObjective?.defaultGoalObjectiveInterventions?.map((selectedIntervention, indexIntervention) =>
                                                    <>
                                                        <div className="position-relative intervationButton">
                                                            <TextAreaKendo
                                                                required={true}
                                                                txtValue={selectedIntervention.intervention && selectedIntervention.intervention}
                                                                onChange={(handleTextChange) => {

                                                                    const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                    interventionList![indexIntervention].intervention = handleTextChange.value;
                                                                    const currentObjective = selectedGoal.defaultGoalObjective;
                                                                    currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList!

                                                                    setGoalList(list => list.map((item, i) =>
                                                                        i === indexGoal
                                                                            ? {
                                                                                ...item,
                                                                                defaultGoalObjective: currentObjective!
                                                                            }
                                                                            : item
                                                                    ));
                                                                }
                                                                }
                                                                name="custAuthId"
                                                                label="Interventions"
                                                                error={(btnPressed && (!selectedIntervention.intervention || selectedIntervention.intervention === '')) && errors.interventions}
                                                            />

                                                            <div className="col-md-12 d-flex gap-4 p-0">
                                                                <div className='col-md-6 pl-0'>
                                                                    <MultiSelectDropDown
                                                                        label="Service Type"
                                                                        // onChange={handleChange}
                                                                        // serviceTypeId
                                                                        // value={fields?.serviceTypeId}
                                                                        value={selectedIntervention.serviceTypeIds && tpServicetypes.filter((obj: any) => {
                                                                            return obj.serviceTypeId === selectedIntervention.serviceTypeIds;
                                                                        })[0]}
                                                                        textField="serviceTypes"
                                                                        name="serviceTypeId"
                                                                        data={tpServicetypes}
                                                                        dataItemKey="serviceTypeId"
                                                                        itemRender={renderToItem}
                                                                        onChange={(e) => {
                                                                            
                                                                            const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                            interventionList![indexIntervention].serviceTypeIds = e.target.value.map((item)=>item.serviceTypeId);
                                                                            const currentObjective = selectedGoal.defaultGoalObjective;
                                                                            currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList!

                                                                            setGoalList(list => list.map((item, i) =>
                                                                                i === indexGoal
                                                                                    ? {
                                                                                        ...item,
                                                                                        defaultGoalObjective: currentObjective!
                                                                                    }
                                                                                    : item
                                                                            ));
                                                                        }}

                                                                    // required={true}
                                                                    // validityStyles={settingError}
                                                                    // error={!fields.status && errors.status}
                                                                    />
                                                                </div>
                                                                <div className='col-md-6 pl-0'>
                                                                <MultiSelectDropDown
                                                                    label="Staff Types"
                                                                    error={errors.typeName}
                                                                    data={tpStaffTypes}
                                                                    // value={fields?.staffTypeId}
                                                                    value={selectedIntervention.staffTypeIds && tpStaffTypes.filter((obj: any) => {
                                                                            return obj.staffTypeIds === selectedIntervention.staffTypeIds;
                                                                        })[0]}
                                                                    textField="typeName"
                                                                    name="staffTypeId"
                                                                    dataItemKey="id"
                                                                    itemRender={renderToItem}
                                                                    autoClose={false}
                                                                    // onChange={handleChange}
                                                                    onChange={(e) => {
                                                                        const selectedIds = e.target.value.map(item => item.id);
                                                                        const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                        interventionList![indexIntervention].staffTypeIds = selectedIds;
                                                                        const currentObjective = selectedGoal.defaultGoalObjective;
                                                                        currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList!

                                                                        setGoalList(list => list.map((item, i) =>
                                                                            i === indexGoal
                                                                                ? {
                                                                                    ...item,
                                                                                    defaultGoalObjective: currentObjective!
                                                                                }
                                                                                : item
                                                                        ));
                                                                    }}
                                                                />
                                                                </div>
                                                            </div>
                                                            <div className='col-md-12 pl-0'>
                                                                {/* <div className="frequency mb-3"> */}
                                                                {/* <div className="row mb-2"> */}
                                                                {/* <div className="col-md-12"> */}
                                                                <label className="mb-0">Frequency</label>
                                                                {/* </div> */}
                                                                {/* </div> */}
                                                                <div className="">
                                                                    <div className="col-md-12 d-flex gap-4 p-0">
                                                                        <div className='col-md-6 pl-0'>
                                                                            <InputKendoRctV1
                                                                                value={selectedIntervention.numFreq && selectedIntervention.numFreq}
                                                                                onChange={(handleTextChange) => {

                                                                                    const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                                    interventionList![indexIntervention].numFreq = handleTextChange.value;
                                                                                    const currentObjective = selectedGoal.defaultGoalObjective;
                                                                                    currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList!

                                                                                    setGoalList(list => list.map((item, i) =>
                                                                                        i === indexGoal
                                                                                            ? {
                                                                                                ...item,
                                                                                                defaultGoalObjective: currentObjective!
                                                                                            }
                                                                                            : item
                                                                                    ));
                                                                                }}

                                                                                className="w-100 width-input"
                                                                                style={{ width: "100% !important" }}
                                                                                required={true}
                                                                                error={(btnPressed && (!selectedIntervention.numFreq || selectedIntervention.numFreq === '')) && errors.numFreq}


                                                                            />
                                                                        </div>

                                                                        <div className='col-md-6 pr-0'>
                                                                            <DropDownList
                                                                                data={frequencyData}
                                                                                // defaultItem={frequencyData[0]}
                                                                                textField="value"
                                                                                dataItemKey="key"
                                                                                value={selectedIntervention.freq ? frequencyData.filter(obj => {
                                                                                    return obj.value === selectedIntervention.freq;

                                                                                })[0] : frequencyData[0]}
                                                                                onChange={(e) => {
                                                                                    const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                                    interventionList![indexIntervention].freq = e.target.value.value;
                                                                                    const currentObjective = selectedGoal.defaultGoalObjective;
                                                                                    currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList!
                                                                                    setGoalList(list => list.map((item, i) =>
                                                                                        i === indexGoal
                                                                                            ? {
                                                                                                ...item,
                                                                                                defaultGoalObjective: currentObjective!
                                                                                            }
                                                                                            : item
                                                                                    ));
                                                                                }}
                                                                                name="freq"
                                                                                className="w-100 width-input frequency-drop "
                                                                                style={{ width: "100% !important" }}
                                                                                required={true}
                                                                            // error={!fields.freq && errors.freq}
                                                                            />
                                                                            {/* {!fields.freq && <Error>{errors.freq}</Error>} */}
                                                                        </div>
                                                                    </div>
                                                                </div></div>



                                                            {(!isEdit && selectedObjective.defaultGoalObjectiveInterventions && selectedObjective.defaultGoalObjectiveInterventions.length > 1)
                                                                && <button className="btn-transaprent">
                                                                    <i onClick={
                                                                        () => {
                                                                            const interventionList = selectedObjective.defaultGoalObjectiveInterventions;
                                                                            const removeIndexedItem = interventionList?.filter((item, i) => i !== indexIntervention)
                                                                            const currentObjective = selectedGoal.defaultGoalObjective;
                                                                            currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = removeIndexedItem

                                                                            setGoalList(list => list.map((item, i) =>
                                                                                i === indexGoal
                                                                                    ? {
                                                                                        ...item,
                                                                                        defaultGoalObjective: currentObjective!
                                                                                    }
                                                                                    : item
                                                                            ));
                                                                        }
                                                                    }
                                                                        className="fa-solid fa-xmark cross-red"></i>
                                                                </button>}
                                                        </div>


                                                    </>
                                                )

                                            }
                                            {(!isEdit) && <div className="text-right">
                                                <button
                                                    onClick={() => {
                                                        const currentListInterventions = selectedObjective.defaultGoalObjectiveInterventions;
                                                        currentListInterventions?.push({ freq: frequencyData[0].value })
                                                        const currentList = selectedGoal.defaultGoalObjective;
                                                        currentList![indexObjective].defaultGoalObjectiveInterventions = currentListInterventions
                                                        handleDeleteIntervention(indexGoal, currentList)
                                                    }
                                                    }
                                                    className="AddMore"><i className="fa-solid fa-plus"></i> Add Interventions</button>
                                            </div>}
                                        </div>

                                    </div>



                                )



                            }




                        </div>

                        {(!isEdit) && <div className="text-right col-md-6">
                            <button
                                onClick={() => {
                                    const currentList = selectedGoal.defaultGoalObjective;
                                    currentList?.push({ defaultGoalObjectiveInterventions: [{}] })
                                    setGoalList(list => list.map((item, i) =>
                                        i === indexGoal
                                            ? {
                                                ...item,
                                                defaultGoalObjective: currentList
                                            }
                                            : item
                                    ));
                                }
                                }

                                className="AddMore"><i className="fa-solid fa-plus"></i> Add Objectives
                            </button>
                        </div>}

                    </div>

                )


            }



            {
                (!isEdit) && <button
                    onClick={() => {
                        setGoalList(oldArray => [...oldArray, { defaultGoalObjective: [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: [],serviceTypeIds: [] }] }] }]);
                    }}
                    className="AddMore mt-3"><i className="fa-solid fa-plus"></i> Add Another Goal</button>}
        </div>
        <div className="row mt-4 ml-1 ">
            <div className="d-flex">
                <div>
                    <button
                        onClick={saveGoalsData}
                        className="btn blue-primary text-white "
                    >
                        Submit
                    </button>
                </div>
                <div>
                    <button
                        className="btn grey-secondary text-white  mx-3"
                        onClick={handleCancel}
                    >
                        Cancel
                    </button>
                </div>
            </div>
        </div>

    </div>)
};

export default AddNewDefaultGoals;