test procedure

import { useEffect } from "react";
import { useContext, useRef, useState } from "react"
import { DiagnosticContext, useOutsideClick, useSessionStorage } from "../../helpers/functions"
import { categories } from "../../services/londi-constants";
import { getSuggestedTests } from "../../services/londi-suggestions"

const TestProcedure = ({ testProcedure }) => {
    const { state, dispatch } = useContext(DiagnosticContext);

    const [checkedReading, setCheckedReading] = useSessionStorage('checkboxesReading', false)
    const [disableReading, setDisableReading] = useSessionStorage('checkboxesDisableReading', false)
    const [checkedWriting, setCheckedWriting] = useSessionStorage('checkboxesWriting', false)
    const [disableWriting, setDisableWriting] = useSessionStorage('checkboxesDisableWriting', false)
    const [checkedCounting, setCheckedCounting] = useSessionStorage('checkboxesCounting', false)
    const [disableCounting, setDisableCounting] = useSessionStorage('checkboxesDisableCounting', false)
    const [disable, setDisable] = useState(true)
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);

    const newState = {
        ...state, screeningResultCounting: { category: 3, result: 1 },
        screeningResultReading: { category: 1, result: 1 },
        screeningResultWriting: { category: 2, result: 1 }
    }
    const suggestedOutput = getSuggestedTests(newState)

    useEffect(() => {
        if (state.schoolGrade !== undefined && state.age !== undefined && state.testTime !== undefined && state.germanSecondaryLanguage !== undefined) {
            setDisable(false)
        }
    }, [state.age, state.germanSecondaryLanguage, state.schoolGrade, state.testTime])

    return (
        testProcedure &&
        <div className="flex flex-col">
            <p className="text-lg font-semibold">Testverfahren</p>
            {<div className={`${disableReading && 'opacity-25'} ${disable && 'opacity-25'} options-container`}>
                <h5 className="options-name"><input checked={checkedReading} onChange={(e) => {
                    if (!e.target.checked) {
                        setDisableReading(true)
                        setCheckedReading(false)
                        dispatch({ type: "clearReading" });
                    } else {
                        setCheckedReading(true)
                        setDisableReading(false)
                    }
                }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Lesen</h5>
                {disableReading ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className='btn-options' type="button">
                    <div className="truncate"></div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button> : <button onClick={() => dispatch({ type: 'readingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className='btn-options' type="button">
                    <div className="truncate">{state?.readingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>}

                {state?.options === 'readingOptions' &&
                    <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                        <ul className="dropdown" aria-labelledby="dropdownDefault">
                            <li>
                                {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                    return category === categories.Reading &&
                                        <>
                                            {testsA.length > 0 && testsA.map((res) => {
                                                return <button key={res.id} onClick={() => {
                                                    dispatch({ type: 'readingTest', payload: res.shortName })
                                                    setCheckedReading(true)
                                                }} className="diagnostic-options">{res.shortName}</button>
                                            })}
                                            {testsB.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 2--</p>
                                                    {testsB.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'readingTest', payload: res.shortName })
                                                            setCheckedReading(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsC.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 3--</p>
                                                    {testsC.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'readingTest', payload: res.shortName })
                                                            setCheckedReading(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsD.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 4--</p>
                                                    {testsD.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'readingTest', payload: res.shortName })
                                                            setCheckedReading(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsE.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 5--</p>
                                                    {testsE.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'readingTest', payload: res.shortName })
                                                            setCheckedReading(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                        </>
                                })}
                            </li>
                        </ul>
                    </div>}
            </div>}
            <div className={`${disableWriting && 'opacity-25'} ${disable && 'opacity-25'} options-container`}>
                <h5 className="options-name"><input checked={checkedWriting} onChange={(e) => {
                    if (!e.target.checked) {
                        setDisableWriting(true)
                        setCheckedWriting(false)
                        dispatch({ type: "clearWriting" });
                    } else {
                        setCheckedWriting(true)
                        setDisableWriting(false)
                    }
                }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Schreiben</h5>
                {disableWriting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className='btn-options' type="button">
                    <div className="truncate"></div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button> : <button onClick={() => dispatch({ type: 'writingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                    className=' btn-options' type="button">
                    <div className="truncate">{state?.writingResults}</div>
                    <svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>}
                {state?.options === 'writingOptions' &&
                    <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                        <ul className="dropdown" aria-labelledby="dropdownDefault">
                            <li>
                                {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                    return category === categories.Writing &&
                                        <>
                                            {testsA.length > 0 && testsA.map((res) => {
                                                return <button key={res.id} onClick={() => {
                                                    dispatch({ type: 'writingTest', payload: res.shortName })
                                                    setCheckedWriting(true)
                                                }} className="diagnostic-options">{res.shortName}</button>
                                            })}
                                            {testsB.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 2--</p>
                                                    {testsB.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsC.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 3--</p>
                                                    {testsC.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsD.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 4--</p>
                                                    {testsD.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsE.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 5--</p>
                                                    {testsE.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                        </>
                                })}
                            </li>
                        </ul>
                    </div>}
            </div>
            <div className={`${disableCounting && 'opacity-25'} ${disable && 'opacity-25'} options-container`}>
                <h5 className="options-name"><input checked={checkedCounting} onChange={(e) => {
                    if (!e.target.checked) {
                        setDisableCounting(true)
                        setCheckedCounting(false)
                        dispatch({ type: "clearCounting" });
                    } else {
                        setCheckedCounting(true)
                        setDisableCounting(false)
                    }
                }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Rechnen</h5>
                {disableCounting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className='btn-options' type="button">
                    <div className="truncate"></div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button> : <button onClick={() => dispatch({ type: 'countingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                    className='btn-options' type="button"><div className="truncate">{state?.countingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>}
                {state?.options === 'countingOptions' &&
                    <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                        <ul className="dropdown" aria-labelledby="dropdownDefault">
                            <li>
                                {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                    return category === categories.Math &&
                                        <>
                                            {testsA.length > 0 && testsA.map((res) => {
                                                return <button key={res.id} onClick={() => {
                                                    dispatch({ type: 'countingTest', payload: res.shortName })
                                                    setCheckedCounting(true)
                                                }} className="diagnostic-options">{res.shortName}</button>
                                            })}
                                            {testsB.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 2--</p>
                                                    {testsB.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsC.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 3--</p>
                                                    {testsC.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsD.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 4--</p>
                                                    {testsD.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {testsE.length > 0 &&
                                                <>
                                                    <p className="text-center">--GROUP 5--</p>
                                                    {testsE.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                        </>
                                })}
                            </li>
                        </ul>
                    </div>}
            </div>
        </div>
    )
}
export default TestProcedure