import { TutorMenu } from '@/components/menus/tutorMenu'

import Image from 'next/image'
import left_chevron from '../../../public/assets/interface/left_chevron.svg'
import gray_left_chevron from '../../../public/assets/interface/gray_left_chevron.svg'
import right_chevron from '../../../public/assets/interface/right_chevron.svg'

import { useState, useEffect } from 'react'

import { GETRequest } from '@/utils/requestHeader'
import { lock, unlock } from '@/utils/lockScreen'
import calendar from '../../../public/assets/data/calendar.json'
import { CheckSlot } from '@/components/dasboardTutors/checkSlot'

import calendarPix from '../../../public/assets/dashboard/whitePicto/calendar.svg'
import bgClient from '../../../public/assets/dashboard/bgClient.svg'
import { DashboardTitle } from '@/components/titleDashboard'

import { BlackHamburger } from '@/components/menus/clientBugerMenu'
import TuteurBurgerMenu from '@/components/menus/tuteurBurgerMenu'
import { NoIndexHead } from '@/utils/customHead'

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps ({req, res}) {
  const Cookies = require('cookies')
  const cookies = new Cookies(req, res)
  const authToken = cookies.get('auth-token') || ''

  const response = await fetch(`${API_URL}/api/auth/me/tutors`, {
    method:'GET',
    mode: "cors",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
    }
  })
  if(response.status !== 200) {
    return { 
      redirect: {
        destination: '/tuteur',
        permanent: false,
      },
  }}
  const user = await response.json()

  const seances = await fetch(`${API_URL}/api/formations/seances`, GETRequest).then(r => r.json())
  const userId = user.id
  
  return {
    props: {
        userId: userId,
        allSeances: seances.filter(f => f.has_payed_order === true)
    }
  }
}
  

export default function TutorCalendar({userId, allSeances}) {

    const { v4: uuidv4 } = require('uuid');
    const [numberOfDays, setNumberOfDays] = useState([])
    const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
    const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
    const [lag, setLag] = useState()
    
    const [date, setDate] = useState(new Date())
    const [slot, setSlot] = useState(false)
    const [seances, setSeances] = useState()

    const [menu, setMenu] = useState(false)
    const [hamburger, setHamburger] = useState(false)

    useEffect(() => {
      setSeances(allSeances.filter(f => f.tutor_id === userId).map(m => new Date(m.beginning_date)))
    }, [userId, allSeances])

    //update lag when month change (starting day)
    useEffect(() => {
        if(new Date(currentYear, currentMonth, 1).getDay() === 0) {
            setLag([...Array(6).keys()])
            return
        }
        setLag([...Array(new Date(currentYear, currentMonth, 1).getDay()-1).keys()])
    },[currentMonth, currentYear])

    //update days number when month change
    useEffect(() => {
        setNumberOfDays([])
        let bissextile = 0
        if(currentYear%4 === 0) {bissextile=1}
        for(let i=0; i<calendar.months[currentMonth].days_number; i++){
            if(bissextile>0 && currentMonth === 1) {
                setNumberOfDays([...Array(29).keys()])
                return
            } 
            setNumberOfDays(previous => [...previous, i])
        }
    }, [currentMonth, currentYear])

    //restart month with arrow
    const changeMonth = (timeOrientation) => {
        if(currentMonth===11 && timeOrientation===1){
            setCurrentYear(currentYear+1)
            setCurrentMonth(0)
            return
        }
        if(currentMonth===0 && timeOrientation===-1){
            setCurrentYear(currentYear-1)
            setCurrentMonth(11)
            return
        }
        setCurrentMonth(currentMonth + (timeOrientation*1))
    }

    return(
    <>
    <NoIndexHead />
      <main className='h-[100vh] w-[100vw] bg-cover bg-center flex'>
        <TutorMenu id={userId} />
        <TuteurBurgerMenu menu={menu} setMenu={setMenu} setHamburger={setHamburger}/>
        <section className='flex-col items-center gap-9 text-white flex w-full max-h-[100vh] mt-20 p-14 ml-[320px] lg:ml-0'>
            <Image src={bgClient} alt="Big pictogram" className='absolute -z-10 bottom-0 right-0'/>
            <DashboardTitle text='Calendrier' image={calendarPix}/>
            <div onClick={() => {setMenu(!menu); menu ? unlock() : lock()}} className='hidden z-40 absolute top-7 left-8 lg:block'>
                <BlackHamburger hamburger={hamburger} setHamburger={setHamburger}/>
            </div>
            <CheckSlot day={date} his_seances={allSeances.filter(f => f.tutor_id === userId)} setSlot={setSlot} slot={slot}/>
            <section className='grid grid-cols-2 gap-5 w-[600px] md:w-[95%]'>
                <>
                <div className='col-span-2 bg-white text-black max-w-[600px] px-[30px] py-10 rounded-2xl shadow-dashboard sm:px-5 md:place-self-center sm:py-5 sm:min-w-[400px] 2sm:min-w-[95vw]'>
                    <div className='flex text-2xl font-bold mb-5 items-center justify-between sm:text-xl sm:mb-2'>
                        <p>{calendar.months[currentMonth].month} {currentYear}</p>
                        <div className='flex  items-center gap-5'>
                            {currentYear === new Date().getFullYear() && currentMonth === new Date().getMonth() 
                                ?<Image src={gray_left_chevron} alt="Arrow icon" className='w-8 cursor-pointer'/>
                                :<Image src={left_chevron} alt="Arrow icon" className='w-8 cursor-pointer' onClick={() => {changeMonth(-1)}}/>
                            }
                           <Image src={right_chevron} alt="Arrow icon" className='w-8 cursor-pointer' onClick={() => {changeMonth(1)}} />
                        </div>
                    </div>
                    <div className='grid grid-cols-7 place-items-center mx-5 sm:mx-0'>
                        {calendar.days.map(day => <h3 key={day.id} className='p-5 text-sm font-bold'><p className='w-6 h-6 flex items-center justify-center'>{day.day.slice(0,3).toLowerCase()}</p></h3>)}
                    </div>
                    <div className='grid grid-cols-7 place-items-center gap-x-[9px] gap-y-5'>
                        {lag === 0 
                            ? ''
                            : lag?.map(n => <h3 key={n} className='p-5 text-sm font-bold md:p-0 md:min-w-[40px] md:min-h-[40px] md:w-full md:h-full'><p className='w-6 h-6 flex items-center justify-center'></p></h3>)
                        }
                        {numberOfDays.map(n => 
                            <div key={uuidv4()} 
                                 onClick={() => {setDate(new Date(currentYear, currentMonth, n+1)); setSlot(true); lock()}} 
                                 className='p-5 border rounded relative border-[#D5D4DF] text-sm flex items-center justify-center cursor-pointer hover:bg-[#409FC3]/40 transition-all duration-300 md:p-0 md:min-w-[40px] md:min-h-[40px] md:w-full md:h-full 2sm:min-h-[35px] 2sm:min-w-[35px]' 
                                 style={(currentYear === new Date().getFullYear() && currentMonth === new Date().getMonth() && n+1<new Date().getDate())
                                  ? {backgroundColor:'rgb(243 244 246)', color:'rgb(156 163 175)', cursor:'default',  pointerEvents: "none"} 
                                  : {}}>
                                <p className='z-10 w-6 h-6 flex items-center justify-center'>{n+1}</p>
                                <div className='w-16 h-16 z-0 left-0 top-0 bg-[#3D9EC2]/50 absolute md:p-0 md:min-w-[38px] md:min-h-[38px] md:w-full md:h-full 2sm:min-h-[32px] 2sm:min-w-[32px]' style={
                                seances?.findIndex(i => new Date(i.getFullYear(),i.getMonth(),i.getDate(),0,0,0,0).getTime() === new Date(currentYear,currentMonth,n+1,0,0,0,0).getTime()) === -1 || new Date().getTime() >= new Date(currentYear,currentMonth,n+2,0,0,0,0).getTime()
                                ? {display:'none'}  
                                : {display:'flex'}
                                }></div>
                            </div>)
                        }
                    </div>
                </div>          
            </>
            </section>
        </section>
  </main>
  </>
    )
}