TestProcedure

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 [selectReadingGroup, setSelectReadingGroup] = useState(null)
    const [selectWritingGroup, setSelectWritingGroup] = useState(null)
    const [selectCountingGroup, setSelectCountingGroup] = useState(null)
    const [selectReadingCompetenceLevel, setSelectReadingCompetenceLevel] = useState(null)

    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, false, false)
console.log(suggestedOutput)
    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="flex items-end">
                {<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 })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        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 })
                                                                dispatch({ type: 'readingTestId', payload: res.id })
                                                                setSelectReadingGroup(2)
                                                                setSelectReadingCompetenceLevel(res.comptenenceLevels)
                                                                setCheckedReading(true)
                                                            }} className="diagnostic-options">{res.shortName}</button>
                                                        })}
                                                    </>}
                                                {(testsA.length === 0 && testsB.length === 0) &&
                                                    <>
                                                        <p className="text-center">--GROUP 3--</p>
                                                        {testsC.map((res) => {
                                                            return <button key={res.id} onClick={() => {
                                                                dispatch({ type: 'readingTest', payload: res.shortName })
                                                                dispatch({ type: 'readingTestId', payload: res.id })
                                                                setCheckedReading(true)
                                                            }} className="diagnostic-options">{res.shortName}</button>
                                                        })}
                                                    </>}
                                                {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0) &&
                                                    <>
                                                        <p className="text-center">--GROUP 4--</p>
                                                        {testsD.map((res) => {
                                                            return <button key={res.id} onClick={() => {
                                                                dispatch({ type: 'readingTest', payload: res.shortName })
                                                                dispatch({ type: 'readingTestId', payload: res.id })
                                                                setSelectReadingGroup(4)
                                                                setCheckedReading(true)
                                                                setSelectReadingCompetenceLevel(res.comptenenceLevels)

                                                            }} className="diagnostic-options">{res.shortName}</button>
                                                        })}
                                                    </>}
                                                {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0 && testsD.length === 0) &&
                                                    <>
                                                        <p className="text-center">--GROUP 5--</p>
                                                        {testsE.map((res) => {
                                                            return <button key={res.id} onClick={() => {
                                                                dispatch({ type: 'readingTest', payload: res.shortName })
                                                                dispatch({ type: 'readingTestId', payload: res.id })
                                                                setCheckedReading(true)
                                                            }} className="diagnostic-options">{res.shortName}</button>
                                                        })}
                                                    </>}
                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>}
                </div>}
                {(selectReadingGroup === 2 || selectReadingGroup === 4) &&
                    <>
                        <button onClick={() => dispatch({ type: 'readingSecondTestOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className='btn-options ml-5' type="button">
                            <div className="truncate">{state?.readingSecondTestResults}</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 === 'readingSecondTestOptions' &&
                            <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                                <ul className="dropdown" aria-labelledby="dropdownDefault">
                                    <li>
                                        {suggestedOutput.map(({ category, testsB }) => {
                                            return category === categories.Reading &&
                                                testsB.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingSecondTest', payload: res.shortName })
                                                        dispatch({ type: 'readingSecondTestId', payload: res.id })
                                                        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 })
                                                    dispatch({ type: 'writingTestId', payload: res.id })
                                                    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 })
                                                            dispatch({ type: 'writingTestId', payload: res.id })
                                                            setCheckedWriting(true)
                                                            setSelectWritingGroup(2)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 3--</p>
                                                    {testsC.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            dispatch({ type: 'writingTestId', payload: res.id })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 4--</p>
                                                    {testsD.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            dispatch({ type: 'writingTestId', payload: res.id })
                                                            setCheckedWriting(true)
                                                            setSelectWritingGroup(4)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0 && testsD.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 5--</p>
                                                    {testsE.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'writingTest', payload: res.shortName })
                                                            dispatch({ type: 'writingTestId', payload: res.id })
                                                            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 })
                                                    dispatch({ type: 'countingTestId', payload: res.id })
                                                    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 })
                                                            dispatch({ type: 'countingTestId', payload: res.id })
                                                            setCheckedCounting(true)
                                                            setSelectCountingGroup(2)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 3--</p>
                                                    {testsC.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            dispatch({ type: 'countingTestId', payload: res.id })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 4--</p>
                                                    {testsD.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            dispatch({ type: 'countingTestId', payload: res.id })
                                                            setCheckedCounting(true)
                                                            setSelectCountingGroup(4)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                            {(testsA.length === 0 && testsB.length === 0 && testsC.length === 0 && testsD.length === 0) &&
                                                <>
                                                    <p className="text-center">--GROUP 5--</p>
                                                    {testsE.map((res) => {
                                                        return <button key={res.id} onClick={() => {
                                                            dispatch({ type: 'countingTestId', payload: res.id })
                                                            dispatch({ type: 'countingTest', payload: res.shortName })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{res.shortName}</button>
                                                    })}
                                                </>}
                                        </>
                                })}
                            </li>
                        </ul>
                    </div>}
            </div>
        </div>
    )
}
export default TestProcedure