TestResults

import { useContext, useRef } from "react"
import { DiagnosticContext, useOutsideClick } from "../../helpers/functions";
import Tabs from "../Tabs"
import {  getTestFields } from "../../services/londi-suggestions";
import { value } from "../../helpers/constants";

const TestResults = () => {
    const { state, dispatch } = useContext(DiagnosticContext);
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);
    return (
        <>
            <Tabs />
            <div className="flex font-montserrat items-center flex-col justify-center m-auto w-full">
                <h1 className="text-mainBlue text-3xl font-semibold mt-10 md:text-5xl mb-3">Testergebnisse</h1>
                <div className="flex flex-col w-11/12">
                    <p className="text-lg lg:text-xl">Bitte geben Sie die Ergebnisse der Tests ein.</p>
                    <div className="flex mt-7">
                        <div className="flex flex-col w-full">
                            <p className="text-2xl font-semibold">Lesen</p>
                            <div className="flex flex-wrap">
                                <div className="flex flex-col ml-1 w-full">
                                    <div>
                                        <p className="text-2xl mt-4 font-semibold">{state.readingResults}</p>
                                        <div className="flex flex-col  justify-between">
                                            {getTestFields(state.readingTestId).map((el, index) => {
                                                return (
                                                    <div key={index} className="flex flex-col ">
                                                        <div className="mt-4" key={index}>
                                                            <p>{el.title}</p>
                                                            <button onClick={() => dispatch({ type: 'valueOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options' type="button"><div className="truncate">{state?.value?.[index]}</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 && state?.selectedValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, index) => {
                                                                            return (
                                                                                <li key={index}>
                                                                                    <button onClick={() => dispatch({ type: 'value', payload: { key: index, value: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                        </div>
                                                    </div>
                                                )
                                            })}
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="/funding-recomendations"><button className="text-white bg-mainBlue text-lg w-32 h-10 sm:w-60 sm:text-xl sm:h-14 my-10">Weiter</button></a>
            </div>
        </>
    )
}

export default TestResults