import Image from 'next/image'
import banner_2 from '../../../public/assets/interface/banner_2.svg'
import bullet from '../../../public/assets/interface/bullet.svg'
import suitcase from '../../../public/assets/interface/suitcase.svg'
import list from '../../../public/assets/interface/list.svg'
import sunglasses from '../../../public/assets/interface/sunglasses.svg'
import wand from '../../../public/assets/interface/wand.svg'
import circle from '../../../public/assets/interface/circle.svg'
import accessibility from '../../../public/assets/interface/accessibility.svg'
import vector from '../../../public/assets/interface/vector.svg'
import arrow from '../../../public/assets/interface/yellow_arrow.svg'
import arrow2 from '../../../public/assets/interface/whiteArrow.svg'
import downloadLogo from '../../../public/assets/interface/downloadLogo.svg'
import { GETRequest } from '@/utils/requestHeader'
import { useContext, useEffect, useState } from 'react'
import { PictoCard } from '.'
import Link from 'next/link'
import { toHoursAndMinutesH } from '@/utils/timeToHours'
import Layout from '@/components/layout/layout'

import { ClientContext } from '@/utils/cartProvider'
import { themeGoldNugget, inputDisciplines } from '@/components/forms/selectInput'
import Select from 'react-select'

import { useForm, Controller } from "react-hook-form";
import { schemaDiscipline } from '../../../public/assets/yup'
import { yupResolver } from '@hookform/resolvers/yup';
import { useRouter } from 'next/router'
import Head from 'next/head'
import * as ga from '../../lib/ga'

import computerT from '../../../public/assets/interface/colorPicto/computerTut.svg'
import clockT from '../../../public/assets/interface/colorPicto/clockTut.svg'
import peopleT from '../../../public/assets/interface/colorPicto/peopleTut.svg'
import folderT from '../../../public/assets/interface/colorPicto/folderTut.svg'
import computerR from '../../../public/assets/interface/colorPicto/computerR.svg'
import clockR from '../../../public/assets/interface/colorPicto/clockR.svg'
import peopleR from '../../../public/assets/interface/colorPicto/peopleR.svg'
import folderR from '../../../public/assets/interface/colorPicto/folderR.svg'
import computerP from '../../../public/assets/interface/colorPicto/computerP.svg'
import clockP from '../../../public/assets/interface/colorPicto/clockP.svg'
import peopleP from '../../../public/assets/interface/colorPicto/peopleP.svg'
import folderP from '../../../public/assets/interface/colorPicto/folderP.svg'
import computerM from '../../../public/assets/interface/colorPicto/computerM.svg'
import clockM from '../../../public/assets/interface/colorPicto/clockM.svg'
import peopleM from '../../../public/assets/interface/colorPicto/peopleM.svg'
import folderM from '../../../public/assets/interface/colorPicto/folderM.svg'
import deliverableM from '../../../public/assets/interface/colorPicto/deliverableM.svg'
import deliverableP from '../../../public/assets/interface/colorPicto/deliverableP.svg'
import deliverableR from '../../../public/assets/interface/colorPicto/deliverableR.svg'
import deliverableT from '../../../public/assets/interface/colorPicto/deliverableTut.svg'

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps(context) {
    const current_user_formation = await fetch(`${API_URL}/api/formations/slug/${context.query.userFormation}`, GETRequest).then(r => r.json())
    return {
        props: {
            formation:current_user_formation
        }
    }
}

export default function UserFormation({formation}) {
    const [availableTutors, setAvailableTutors] = useState([])
    const router = useRouter()
    const {control, handleSubmit} = useForm({resolver: yupResolver(schemaDiscipline)})
    const { dispatch } = useContext(ClientContext)
    
    const [color, setColor] = useState()
    const [picto1, setPicto1] = useState()
    const [picto2, setPicto2] = useState()
    const [picto3, setPicto3] = useState()
    const [picto4, setPicto4] = useState()
    const [picto5, setPicto5] = useState()

    const subscribe = (discipline) => {
        ga.event({
          action: "subscribe",
          params : {
            discipline: discipline
          }
        })
      }

    function onSubmit(data) {
        if(!data.formation_discipline) return
        dispatch({
            type: 'CLEAR',
        })
        dispatch({
            type: 'ADD_DISCIPLINE',
            discipline: data.formation_discipline
        })
        subscribe(data.formation_discipline)
        router.push({
            pathname: '/user-interface/booking',
            query: formation,
        })
    }

    useEffect(() => {
        setAvailableTutors([])
        for(const available in formation.available_tutors){
            if(formation.available_tutors[available].length > 0){
                setAvailableTutors((previous => [...previous, {value:available, label:available}]))
            }
        }
    }, [formation])

    useEffect(() => {
        switch(formation?.expertises){
            case "Tutorat": setColor('#3D9EC2');setPicto1(peopleT);setPicto2(clockT);setPicto3(folderT);setPicto4(computerT);setPicto5(deliverableT);break;
            case "Rédaction": setColor('#FDB636');setPicto1(peopleR);setPicto2(clockR);setPicto3(folderR);setPicto4(computerR);setPicto5(deliverableR);break;
            case "Préparation à l’oral": setColor('#FF6551');setPicto1(peopleP);setPicto2(clockP);setPicto3(folderP);setPicto4(computerP);setPicto5(deliverableP);break;
            case "Mise en Page": setColor('#BBBCC0');setPicto1(peopleM);setPicto2(clockM);setPicto3(folderM);setPicto4(computerM);setPicto5(deliverableM);break;
            case "Sur-mesure": setColor('#2A3955');break;
            default: setColor('#3D9EC2');setPicto1(peopleT);setPicto2(clockT);setPicto3(folderT);setPicto4(computerT);setPicto5(deliverableT);break;
        }
    }, [formation])

    return (
    <>
        <Head>
            <title>{`Scriptor - ${formation?.title}`}</title>
            <meta name="description" content="Bénéficiez d'une formation personnalisée pour la rédaction de votre mémoire. Nos tuteurs vous accompagnent pas-à-pas pour répondre à vos besoins." />
        </Head>
        <Layout>
            <main className='w-[100vw] flex flex-col items-center pb-20' >
                <section className='h-[300px] max-w-[100vw] w-[100vw] relative bg-[#3D9EC2] flex flex-col gap-[30px] text-white px-[15vw] justify-center lg:items-start lg:pl-[10vw] md:h-auto md:py-14 md:gap-5 sm:py-10'>
                    <h2 className='text-lg  md:text-base'>{formation?.expertises}</h2>
                    <div className='h-[6px] bg-white w-[105px] md:h-1'></div>
                    <h1 className='text-3xl max-w-[800px] font-bold xl:max-w-[600px] lg:max-w-[400px] lg:text-2xl sm:text-xl'>{formation?.title}</h1>
                    <Image src={banner_2} alt="Banner logo" className="absolute right-0 z-10 md:w-40 md:h-auto sm:hidden" priority />
                    <Image src={vector} alt="Vector logo" className="absolute right-0 bottom-0 md:hidden" priority />
                </section>
                <div className='flex my-20 justify-center w-full gap-10 max-w-[1500px] xl:w-full px-14 lg:flex-col-reverse lg:mt-14 lg:gap-20 sm:px-4 sm:mb-1'>
                    <section className='flex flex-col gap-20 lg:gap-14'>
                        <FormationDetails image={circle} text='Objectifs' information={formation?.descriptions_lines?.goal} />
                        <FormationDetails image={list} text='Programme' information={formation?.descriptions_lines?.program} />
                        <FormationDetails image={suitcase} text='Pré-requis' information={formation?.descriptions_lines?.requirement} />
                        <FormationDetails image={sunglasses} text='Profil formateur' information={formation?.descriptions_lines?.profil} />
                        <FormationDetails image={wand} text='Méthode pédagogique' information={formation?.descriptions_lines?.method} />
                        <FormationDetails image={accessibility} text='Accessibilité' information={formation?.descriptions_lines?.accessibility} />
                    </section>
                    <section className='shadow-2xl rounded-xl sticky top-20 text-xl tracking-[0.2px] place-self-start flex flex-col lg:static lg:place-self-center lg:w-full lg:max-w-[600px]'>
                        <div className='flex flex-col gap-11 pt-10 max-w-[320px] w-[320px] rounded-t-xl mx-12 lg:max-w-none lg:w-full lg:justify-center lg:py-6 lg:gap-6 lg:px-6 lg:mx-0 md:px-10 sm:min-w-[90%] sm:w-[90%] sm:px-0 sm:place-self-center'>
                            <div className='flex justify-between text-lg'>
                                <p className='font-bold' style={{color:color}}>{formation?.expertises}</p>
                                <p>{`Réf: ${formation?.reference.toUpperCase()}`}</p>
                            </div>
                            <h2 className='text-2xl text-[#252B42] font-bold lg:text-xl lg:text-center'>{formation?.title}</h2>
                            {formation?.expertises === 'Sur-mesure' 
                                ? <div className='flex items-center justify-center font-bold text-xl' style={{color:color}}>Création sur-mesure</div>
                                : <>
                                    <div className='gap-x-14 gap-y-5 text-base grid grid-cols-2 lg:gap-5 lg:place-self-center lg:max-w-[400px] lg:flex lg:justify-between 2sm:grid'>
                                        <PictoCard pictoText={formation?.is_collective ? 'Collective' : 'Individuelle'} image={picto1} />
                                        <PictoCard pictoText={`${toHoursAndMinutesH(formation?.sessions_number*(formation?.session_duration))}`} image={picto2} />
                                        <PictoCard pictoText={`${Math.floor(formation?.sessions_number)} cours`} image={picto3} />
                                        {formation?.livrable > 0 && formation?.livrable !== null
                                            ? <PictoCard pictoText={formation?.expertises === 'Sur-mesure' ? '-' : `${formation?.livrable} livrable(s)`} image={picto5} />
                                            : <PictoCard pictoText={"Distanciel"} image={picto4}/>
                                        }   
                                    </div>
                                    <div className='flex items-center justify-center font-bold text-3xl lg:flex lg:text-2xl' style={{color:color}}>{formation?.client_price}€</div>
                                </>
                            }
                        </div>
                        {formation?.expertises === 'Sur-mesure'
                            ?
                            <div className='mt-8 flex flex-col z-20 rounded-b-xl px-12 lg:justify-center lg:mt-0 lg:py-0 lg:px-6 md:w-full' style={{backgroundColor:color}}>
                                <Link href="https://www.scriptor.fr/contact" className='py-[32px] gap-3 flex items-center justify-center font-bold cursor-pointer text-white sm:py-5'>
                                    <Image src={arrow} alt="Arrow icon" className='sm:w-5 h-auto' />
                                    <p className='font-bold md:text-lg sm:text-base'>{`Demande de devis`}</p>
                                </Link>
                            </div>
                            :
                            <form onSubmit={handleSubmit(onSubmit)} className='mt-8 flex flex-col z-20 rounded-b-xl px-12 lg:justify-center lg:mt-0 lg:pt-0 lg:pb-8 lg:px-6 lg:flex-row lg:gap-8 md:w-full md:rounded-t-none md:rounded-b-xl md:py-7 sm:flex-col sm:gap-6' style={{backgroundColor:color}}>
                                <div className="flex flex-col tracking-[0.2px] gap-3 place-self-center mt-5 md:mt-0">
                                    {availableTutors.length > 0 ? 
                                    <>
                                        <label htmlFor='formation_discipline' className="text-white text-base font-semibold">Discipline *</label>
                                        <Controller
                                            name="formation_discipline"
                                            control={control}
                                            render={({ field: {onChange, value} }) =>
                                                <Select placeholder='Sélectionner...' required
                                                        styles={inputDisciplines} theme={themeGoldNugget.theme} className='text-black text-base'
                                                        value={availableTutors?.find((current) => current.value === value)} onChange={(selectedOption) => {onChange(selectedOption.value)}}
                                                        options={availableTutors} instanceId={"2"}
                                                        components={{IndicatorSeparator: () => null}} />}
                                                    />
                                    </>
                                    : 
                                    <div className='my-3 text-center font-bold text-base text-white max-w-[350px]'> 
                                        <p>{`Aucun tuteur n'est actuellement disponible pour cette formation.`}</p>
                                        <p className='font-normal'>{`Revenez plus tard ou contactez-nous.`}</p>
                                    </div>
                                    }
                                    <Link href='https://www.scriptor.fr/contact' className='text-base text-white underline underline-offset-2 font-medium lg:text-sm'>{`Votre discipline n'est pas présente ?`}</Link>
                                </div>
                                {availableTutors.length > 0 
                                    ? <button type='submit' className='py-[32px] gap-3 flex items-center justify-center font-bold cursor-pointer text-white lg:py-0'>
                                        <Image src={arrow2} alt="Arrow icon" className='sm:w-5 h-auto' />
                                        <p className='font-bold md:text-lg sm:text-base'>{`M'inscrire`}</p>
                                    </button>
                                    : <div className='mt-10'></div>
                                }
                            </form>
                        }
                    </section>
                </div>
                <div className='w-[70vw] rounded-[20px] items-center flex gap-10 justify-center pl-10 mt-20 lg:w-[90%] lg:gap-10 md:pr-0 md:pl-10 md:gap-5 md:py-8 2sm:px-5' style={{background:'linear-gradient(95deg, #FDB636 1.38%, #FFD912 98.7%)'}}>
                    <div className='flex flex-col gap-8 lg:w-full lg:gap-4'>
                        <p className='font-bold text-2xl text-typo lg:text-xl sm:text-base'>100% des apprenants satisfaits</p>
                        <a href={formation?.files[0]?.url} download target="_blank" className='bg-[#409FC3] text-white max-w-[400px] rounded-[10px] px-[25px] py-[15px] text-lg text-center font-bold cursor-pointer lg:text-base sm:text-sm'>Téléchargez le programme (PDF)</a>
                        {
                        formation?.url_yt ? <Link href={formation?.url_yt} target="_blank" className='bg-[#409FC3] text-white max-w-[400px] rounded-[10px] px-[25px] py-[15px] text-lg text-center font-bold cursor-pointer lg:text-base sm:text-sm'>Visualisez la vidéo explicative</Link> : ''
                        }
                    </div>
                    <Image src={downloadLogo} alt="Icone des compétences" className='lg:w-60 h-auto sm:w-36 2sm:hidden'  />
                </div>
            </main>
        </Layout>
    </>
    )
}

export function FormationDetails ({text, image, information}) {
    const { v4: uuidv4 } = require('uuid');
    return(
        <div className='text-xl tracking-[0.2px] flex flex-col gap-7'>
            <div className='flex gap-[35px] items-center lg:gap-5'>
                <div className='w-20 h-20 rounded-[20px] flex items-center justify-center bg-[#409FC3] lg:w-14 lg:h-14 lg:rounded-xl sm:h-10 sm:w-10 '>
                    <Image src={image} alt="Icone des compétences" className='lg:w-8 h-auto sm:w-6'  />
                </div>
                <p className='text-3xl font-bold lg:text-2xl sm:text-xl'>{text}</p>
            </div>
            <div className='flex flex-col gap-4'>
                   { information?.map((info) => {
                        if(info?.charAt(0) === "{"){
                            return(
                            <div key={uuidv4()} className='flex items-center gap-3'>
                                <p className='text-lg font-bold'>{info.slice(1,info.length)}</p>
                            </div>
                            )
                        } else if (info?.charAt(0) === "$") {
                            return(
                            <div key={uuidv4()} className='flex items-center gap-3 pl-16'>
                                <Image src={bullet} alt="Bullet icon" className='w-2.5 h-auto'/>
                                <p className='text-base'>{info.slice(1,info.length)}</p>
                            </div>
                            )
                        } else {
                            return(
                            <div key={uuidv4()} className='flex items-center gap-3 pl-5'>
                                <Image src={arrow} alt="Arrow icon" className='w-6 h-auto'/>
                                <p className='text-base'>{info}</p>
                            </div>
                            )
                        }
                    })
                }
            </div>
        </div>
    )
}