import Image from 'next/image'
import details from '../../../../public/assets/tuteur/details.svg'
import Link from 'next/link'
import { GETRequest } from "@/utils/requestHeader"
import { useEffect, useState } from 'react'
import { Pagination } from '@mui/material'
import { TutorMenu } from '@/components/menus/tutorMenu'
import { Loading } from '@/components/loader'

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

import { BlackHamburger } from '@/components/menus/clientBugerMenu'
import TuteurBurgerMenu from '@/components/menus/tuteurBurgerMenu'
import { lock } from '@/utils/lockScreen'

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 result = await fetch(`${API_URL}/api/tutors/${user.id}/orders?with_pagination=true&filters[stripe_status]=PAYED`, GETRequest).then(r => r.json())
  const userId = user.id
  
  return {
      props: {
          userId: userId,
          orders_list:result
      }
  }
}

export default function TutorFormation({orders_list, userId}) {
  const [orders, setOrders] = useState(orders_list)
  const [loading, setLoading] = useState(false)
  const [pagination, setPagination] = useState([])
  const [currentPage, setCurrentPage] = useState()

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

  useEffect(() => {
    setPagination([])
    for(let i = 1; i <= orders.last_page; i++){
      setPagination((previous) => [...previous, i])
    }
  }, [orders])

  async function updatePagination (number) {
    setLoading(true)
    const result = await fetch(`${API_URL}/api/tutors/${userId}/orders?with_pagination=true&page=${number}&filters[stripe_status]=PAYED`, GETRequest).then(r => r.json())
    setOrders(result)
    setLoading(false)
  }

  return (
    <>
    <NoIndexHead />
    <main className='w-[100vw] bg-cover bg-center flex'>
            <TutorMenu id={userId} />
            <TuteurBurgerMenu menu={menu} setMenu={setMenu} setHamburger={setHamburger}/>
            <section className='w-full min-h-[100vh] px-20 py-28 ml-[320px] lg:ml-0 xl:px-5 lg:px-2 lg:py-20'>
              <Image src={bgClient} alt="Big pictogram" className='absolute -z-10 bottom-0 right-0'/>
              <DashboardTitle text='Formation' image={formationPix}/>
              <div onClick={() => {setMenu(!menu); menu ? unlock() : lock()}} className='hidden z-40 absolute top-7 left-8 lg:block'>
                <BlackHamburger hamburger={hamburger} setHamburger={setHamburger}/>
              </div>
              <div className='flex flex-col bg-white shadow-dashboard w-full rounded-xl py-10 px-14 xl:px-5 xl:py-5 lg:px-2 lg:py-2'>
                {loading ? <Loading />
                  : <>
                  { orders?.data.length > 0 
                    ? <>
                    <div className='grid grid-cols-5 p-5 bg-gray-100 font-medium text-sm text-gray-400 border-b rounded-t-xl border-gray-300 items-center justify-items-center px-14 xl:px-5 xl:grid-cols-[repeat(4,2fr)_1fr] sm:grid-cols-[repeat(2,2fr)_1fr]'>
                        <p className='justify-self-start'>Titre</p>
                        <p className='sm:hidden'>Discipline</p>
                        <p className='sm:hidden'>Client</p>
                        <p>Prochaine séance</p>
                    </div>
                    {
                      orders?.data?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).filter(o => o.stripe_status === "PAYED").map((order) =>
                        <div key={order.id} className='grid grid-cols-5 p-5 border-b border-gray-300 text-sm text-typo/90 font-medium bg-[#3D9EC2]/10 justify-items-center items-center px-14 xl:px-5 xl:grid-cols-[repeat(4,2fr)_1fr] sm:grid-cols-[repeat(2,2fr)_1fr]'
                          style={orders?.data?.at(-1).id === order.id ? {border:'none', borderBottomLeftRadius:12, borderBottomRightRadius:12} : {}}>
                          <p className='justify-self-start'>{order.formation_title}</p>
                          <p className='sm:hidden'>{order.discipline}</p>
                          <p className='sm:hidden'>{order.client === null || order.client === undefined ? '-' : order.client.firstname.charAt(0)+order.client.firstname.slice(1).toLowerCase()}</p>
                          {order?.seances.length > 0
                            ? order?.are_all_seances_done 
                              ? <div className='flex flex-col items-center font-bold text-green-600 text-center'>Formation terminée</div>
                              : <div className='flex flex-col items-center font-bold'>
                                <p>{new Date(order?.seances?.at(-1).beginning_date).toLocaleDateString("fr")}</p>
                                <p>{order?.seances?.at(-1).beginning_date.slice(11,-3)}</p>
                              </div>
                            : '-'
                          }
                          <Link href="/tuteur/tutorFormations/[order]" as={`/tuteur/tutorFormations/${order.id}`} className='justify-self-end'>
                            <button className='group flex gap-2 border items-center bg-[#3D9EC2]/70 hover:bg-[#3D9EC2] transition-all duration-300 rounded text-white py-1 px-2'>
                              <p className='xl:hidden'>Détails</p>
                              <Image src={details} alt="details icon" className="group-hover:scale-[1.18] transition-all duration-300 w-6 h-auto mb-[1px]" />
                            </button>
                          </Link>
                        </div>
                      )
                    }
                    <div className='mt-14 mb-4 w-full flex gap-3 justify-center xl:mt-5 xl:mb-2'>
                      <Pagination count={pagination.length} page={currentPage} onChange={(event, value) => {updatePagination(value);setCurrentPage(value)}} />
                    </div>
                  </>
                  : 'Aucune formation en cours.'
                  }
                  </>
                }
                </div>
            </section>
    </main>
    </>
  )
}