FundingRecomendations

import { useContext, useState } from "react"
import { DiagnosticContext, showFundingRecommendations } from "../../helpers/functions"
import { categories } from "../../services/londi-constants"
import Questionnaire from "../Questionnaire"
import Tabs from "../Tabs"

const FundingRecomendations = () => {
    const [readingRecomendations, setReadingRecomendations] = useState(false)
    const [writingRecomendations, setWritingRecomendations] = useState(false)
    const [countingRecomendations, setCountingRecomendations] = useState(false)
    const [feedback, setFeedback] = useState(false)
    const { state } = useContext(DiagnosticContext);

    return (
        <>
            <Tabs />
            <div className="flex font-montserrat items-center flex-col justify-center m-auto">
                <h1 className="text-mainBlue font-semibold text-3xl mt-10 sm:mt-0 md:text-5xl mb-5">Förderempfehlungen</h1>
                <div className="flex text-xl space-y-5 flex-col w-11/12 md:w-2/3  mt-2">
                    <p>Wir empfehlen Ihnen die folgenden Förderprogramme.<br />(Informationen über die Rangreihe der empfohlenen Förderprogramme finden Sie hier.) </p>
                    <p>Für zusätzliche Informationen zu den jeweiligen Förderprogrammen klicken Sie bitte auf die dazugehörige Internetadresse.</p>
                </div>
                <div className="text-lg md:text-xl space-y-2 mt-8">
                    <div className={`flex items-center justify-center`}>
                        <button onClick={() => setReadingRecomendations(!readingRecomendations)}>
                            {readingRecomendations ? <kbd className="arrow-icon">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>
                            </kbd> : <kbd className="inline-flex items-center  text-mainBlue rounded-lg">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>
                            </kbd>}
                        </button>
                        <p className="title">Förderempfehlungen Lesen:</p></div>
                    {readingRecomendations &&
                        showFundingRecommendations(state).map((el) => {
                            return el.category === categories.Reading && el.results.map((res => {
                                const linkShort = res.link.substring(0, 8);
                                const link = linkShort === 'https://' ? res?.link.slice(8) : res.link
                                return (
                                    <div key={res.id} className="flex w-full items-center flex-col">
                                        <div className="flex flex-col  border border-gray-400 w-full sm:w-4/5">
                                            <div className=" flex justify-between border-gray-400">
                                                <div className="flex flex-col">
                                                    <div className='flex flex-col pt-1 pl-2 text-sm p-1 text-mainBlue'>
                                                        <p>{res.title}</p>
                                                        <a href={res.link}>{link}</a>
                                                    </div>
                                                    <div className="text-sm flex-wrap flex pb-2 pt-1 mx-2">
                                                        {res.subtitle && <p>{res?.subtitle},</p>}
                                                        {res.authors && <p className="flex ml-1">{res.authors.map(el => {
                                                            return <p className="ml-1">{el},</p>
                                                        })}</p>}
                                                        {res.year && <p className="ml-1">{res?.year},</p>}
                                                        {res.publisher && <p className="ml-1">{res?.publisher}</p>}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            }))
                        })
                    }
                    <div className="flex items-center justify-center">
                        <button onClick={() => setWritingRecomendations(!writingRecomendations)}>
                            {writingRecomendations ? <kbd className="arrow-icon">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>
                            </kbd> : <kbd className="inline-flex items-center  text-mainBlue rounded-lg">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>
                            </kbd>}
                        </button>
                        <p className="title">Förderempfehlungen Schreiben:</p></div>
                    {writingRecomendations &&
                        showFundingRecommendations(state).map((el) => {
                            return el.category === categories.Writing && el.results.map((res => {
                                const linkShort = res.link.substring(0, 8);
                                const link = linkShort === 'https://' ? res?.link.slice(8) : res.link
                                return (
                                    <div key={res.id} className="flex w-full items-center flex-col">
                                        <div className="flex flex-col  border border-gray-400 w-full sm:w-4/5">
                                            <div className=" flex justify-between border-gray-400">
                                                <div className="flex flex-col">
                                                    <div className='flex flex-col pt-1 pl-2 text-sm p-1 text-mainBlue'>
                                                        <p>{res.title}</p>
                                                        <a href={res.link}>{link}</a>
                                                    </div>
                                                    <div className="text-sm flex-wrap flex pb-2 pt-1 mx-2">
                                                        {res.subtitle && <p>{res?.subtitle},</p>}
                                                        {res.authors && <p className="flex ml-1">{res.authors.map(el => {
                                                            return <p className="ml-1">{el},</p>
                                                        })}</p>}
                                                        {res.year && <p className="ml-1">{res?.year},</p>}
                                                        {res.publisher && <p className="ml-1">{res?.publisher}</p>}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            }))
                        })
                    }
                    <div className="flex items-center justify-center">
                        <button onClick={() => setCountingRecomendations(!countingRecomendations)}>
                            {countingRecomendations ? <kbd className="arrow-icon">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>
                            </kbd> : <kbd className="inline-flex items-center  text-mainBlue rounded-lg">
                                <svg className="icon-size" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>
                            </kbd>}
                        </button>
                        <p className="title">Förderempfehlungen Rechnen:</p></div>
                    {countingRecomendations &&
                        showFundingRecommendations(state).map((el) => {
                            return el.category === categories.Math && el.results.map((res => {
                                const linkShort = res.link.substring(0, 8);
                                const link = linkShort === 'https://' ? res?.link.slice(8) : res.link
                                return (
                                    <div key={res.id} className="flex w-full items-center flex-col">
                                        <div className="flex flex-col  border border-gray-400 w-full sm:w-4/5">
                                            <div className=" flex justify-between border-gray-400">
                                                <div className="flex flex-col">
                                                    <div className='flex flex-col pt-1 pl-2 text-sm p-1 text-mainBlue'>
                                                        <p>{res.title}</p>
                                                        <a href={res.link}>{link}</a>
                                                    </div>
                                                    <div className="text-sm flex-wrap flex pb-2 pt-1 mx-2">
                                                        {res.subtitle && <p>{res?.subtitle},</p>}
                                                        {res.authors && <p className="flex ml-1">{res.authors.map(el => {
                                                            return <p className="ml-1">{el},</p>
                                                        })}</p>}
                                                        {res.year && <p className="ml-1">{res?.year},</p>}
                                                        {res.publisher && <p className="ml-1">{res?.publisher}</p>}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            }))
                        })}
                </div>
                <button onClick={() => setFeedback(true)} className="text-white font-semibold bg-mainBlue w-56 mb-8 h-10 md:w-72 text-lg md:text-2xl md:h-14 my-10">Weiter zur Übersicht
                </button>
                {feedback && <Questionnaire />}
                <p className="text-lg md:text-xl mb-10 mt-3">Auf der nächsten Seite können alle Ergebnisse als PDF ausgedruckt werden.</p>
            </div>

        </>
    )
}

export default FundingRecomendations