TestProcedure

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"
import SecondTestOptions from "./SecondTestOptions";

const newState = {
    screeningResultCounting: { category: 3, result: 1 },
    screeningResultReading: { category: 1, result: 1 },
    screeningResultWriting: { category: 2, result: 1 }
}


const TestProcedure = ({ testProcedure, readingRef, writingRef, selectReadingGroup, setSelectReadingGroup, selectWritingGroup, setSelectWritingGroup, selectCountingGroup, setSelectCountingGroup, readingError, secondTestReadingError, secondTestWritingError, secondTestCountingError, writingError, countingError }) => {
    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 [selectReadingCompetenceLevel, setSelectReadingCompetenceLevel] = useState(null)
    const [selectWritingCompetenceLevel, setSelectWritingCompetenceLevel] = useState(null)
    const [selectCountingCompetenceLevel, setSelectCountingCompetenceLevel] = useState(null)
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);
    const suggestedOutput = getSuggestedTests(newState, false, false, true)
    const handleTestReadingClick = (test) => {
        const testGroup = JSON.parse(test.target?.value)
        setCheckedReading(true)
        if (testGroup.group === 'B') {
            setSelectReadingGroup(2)
            setSelectReadingCompetenceLevel(test.competenceLevels)
        } else {
            setSelectReadingGroup(null)
        }
        if (testGroup.group !== 'B') {
            delete state.readingSecondTestResults
            delete state.readingSecondTestId
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        }
    }
    const handleTestWritingClick = (test) => {
        const testGroup = JSON.parse(test.target?.value)
        setCheckedWriting(true)
        if (testGroup.group === 'B') {
            setSelectWritingGroup(2)
            setSelectWritingCompetenceLevel(test.competenceLevels)
        } else {
            setSelectWritingGroup(null)
        }
        if (testGroup.group !== 'B') {
            delete state.writingSecondTestResults
            delete state.writingSecondTestId
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        }
    }

    const handleTestCountingClick = (test) => {
        dispatch({ type: 'countingTest', payload: test.shortName })
        dispatch({ type: 'countingTestId', payload: test.id })
        setCheckedCounting(true)
        if (test.group === 'B') {
            setSelectCountingGroup(2)
            setSelectCountingCompetenceLevel(test.competenceLevels)
        } else {
            setSelectCountingGroup(null)
        }
        if (test.group !== 'B') {
            delete state.countingSecondTestResults
            delete state.countingSecondTestId
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        }
    }
    const readingCheckbox = (e) => {
        if (!e.target.checked) {
            setDisableReading(true)
            setCheckedReading(false)
            setSelectReadingGroup(null)
            dispatch({ type: "clearReading" });
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        } else {
            setCheckedReading(true)
            setDisableReading(false)
        }
    }

    const writingCheckbox = (e) => {
        if (!e.target.checked) {
            setDisableWriting(true)
            setCheckedWriting(false)
            dispatch({ type: "clearWriting" });
            setSelectWritingGroup(null)
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        } else {
            setCheckedWriting(true)
            setDisableWriting(false)
        }
    }
    const countingCheckbox = (e) => {
        if (!e.target.checked) {
            setDisableCounting(true)
            setCheckedCounting(false)
            setSelectCountingGroup(null)
            dispatch({ type: "clearCounting" });
            sessionStorage.setItem("kidInfo", JSON.stringify(state))
        } else {
            setCheckedCounting(true)
            setDisableCounting(false)
        }
    }
    return (
        testProcedure &&
        <div className="flex flex-col">
            <p className="text-lg font-semibold">Testverfahren</p>
            <div className="flex items-end">
                <div className={`${secondTestReadingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <label for="education-select" className="options-name"><input checked={checkedReading} onChange={(e) => readingCheckbox(e)} id="green-checkbox" type="checkbox" className="diagnostics-results" />Lesen</label>
                    {disableReading ?  <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableReading && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableReading && 'text-gray-300'} 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> : <select onChange={handleTestReadingClick} ref={readingRef} name="education" className="btn-options" id="education-select">
                            <option className={`diagnostic-options ${state?.readingResults && 'hidden'}`} hidden defaultValue=''>{state?.readingResults ? state?.readingResults : ''}</option>
                            {suggestedOutput?.map(({ category, allTests }) => {
                                return category === categories.Reading &&
                                    <>
                                        {allTests.map((res) => {
                                            return (

                                                <option value={`{"name": "${res.shortName}","id": "${res.id}", "group": "${res.group}"}`} key={res.id} className="diagnostic-options">{res.shortName}</option>
                                            )
                                        })}

                                    </>
                            })}
                        </select>}
                       
                    {readingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}
                </div>
                <div className="flex flex-col">
                    <div className={`${selectReadingGroup === 2 || selectCountingGroup === 2 || selectWritingGroup === 2 ? 'h-24 ml-5 w-64 block' : 'hidden'}`}>
                        <p>Bitte wählen Sie zur optimalen Abdeckung der Kompetenzstufen ein weiteres
                            Testverfahren aus, um fortzufahren:</p>
                    </div>
                    {selectReadingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectReadingCompetenceLevel}
                            setChecked={setCheckedReading} secondTestOptions={'readingSecondTestOptions'}
                            secondTestType={'readingSecondTest'} secondTestId={'readingSecondTestId'}
                            showCategory={categories.Reading} showState={state?.readingSecondTestResults} /> : null
                    }
                    {secondTestReadingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}
                </div>
            </div>
            <div className="flex items-end">
                <div className={`${secondTestWritingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <label className="options-name"><input checked={checkedWriting} onChange={(e) => writingCheckbox(e)} id="green-checkbox" type="checkbox" className="diagnostics-results" />Schreiben</label>
                    {/* {disableWriting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableWriting && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableWriting && 'text-gray-300'} 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 overflow-y-auto h-72" aria-labelledby="dropdownDefault">
                                <li>
                                    {suggestedOutput?.map(({ category, allTests }) => {
                                        return category === categories.Writing &&
                                            <>
                                                {allTests.map((res) => {
                                                    return <button key={res.id} onClick={() => handleTestWritingClick(res)} className="diagnostic-options">{res.shortName}</button>
                                                })}

                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>} */}
                        {disableWriting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableWriting && 'bg-gray-100'} `} type="button">
                            <div className="truncate"></div><svg className={`${disableWriting && 'text-gray-300'} 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> : <select onChange={handleTestWritingClick} ref={writingRef} name="education" className="btn-options" id="education-select">
                            <option className={`diagnostic-options ${state?.writingResults && 'hidden'}`} hidden defaultValue=''>{state?.writingResults ? state?.writingResults : ''}</option>
                            {suggestedOutput?.map(({ category, allTests }) => {
                                return category === categories.Writing &&
                                    <>
                                        {allTests.map((res) => {
                                            return (

                                                <option value={`{"name": "${res.shortName}","id": "${res.id}", "group": "${res.group}"}`} key={res.id} className="diagnostic-options">{res.shortName}</option>
                                            )
                                        })}

                                    </>
                            })}
                        </select>}
                    {writingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
                <div className="flex flex-col">
                    {selectWritingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectWritingCompetenceLevel}
                            setChecked={setCheckedWriting} secondTestOptions={'writingSecondTestOptions'}
                            secondTestType={'writingSecondTest'} secondTestId={'writingSecondTestId'}
                            showCategory={categories.Writing} showState={state?.writingSecondTestResults} />
                        : null}

                    {secondTestWritingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>

            </div>
            <div className="flex items-end">
                <div className={`${secondTestCountingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <h5 className="options-name"><input checked={checkedCounting} onChange={(e) => countingCheckbox(e)} id="green-checkbox" type="checkbox" className="diagnostics-results" />Rechnen</h5>
                    {disableCounting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableCounting && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableCounting && 'text-gray-300'} 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 overflow-y-auto h-72" aria-labelledby="dropdownDefault">
                                <li>
                                    {suggestedOutput?.map(({ category, allTests }) => {
                                        return category === categories.Math &&
                                            <>
                                                {allTests.map((res) => {
                                                    return <button key={res.id} onClick={() => handleTestCountingClick(res)} className="diagnostic-options">{res.shortName}</button>
                                                })}

                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>}
                    {countingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
                <div className="flex flex-col">
                    {selectCountingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectCountingCompetenceLevel}
                            setChecked={setCheckedCounting} secondTestOptions={'countingSecondTestOptions'}
                            secondTestType={'countingSecondTest'} secondTestId={'countingSecondTestId'}
                            showCategory={categories.Math} showState={state?.countingSecondTestResults} /> : null
                    }
                    {secondTestCountingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
            </div>
        </div >
    )
}
export default TestProcedure