page.jsx

'use client'

import { useQuery } from "@tanstack/react-query";
import { fetchApi } from "@/utils/fetchApi";
import { useSearchParams } from 'next/navigation'
import { useState } from "react";
import env from "dotenv"
import React from "react";
import ReactPlayer from "react-player/youtube";
import Button from "@/components/button";
import Image from "next/image";
import ErrorModal from "@/components/ErrorModal";

env.config();

function baixarArquivo(url) {
  window.open(`/api/arquivo?path=${encodeURIComponent(url)}`, '_blank');
};

export default function Aula() {
  const [modal, setModal] = useState(true)
  const [index, setIndex] = useState(0)

  const searchParams = useSearchParams()
  const modulo_id = searchParams.get('modulo_id')

  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetchApi(process.env.NEXT_PUBLIC_API_URL + 'aula?perPage=1000&modulo_id=' + modulo_id)

      if (response.isError) {
        throw response;
      } else {
        return response;
      }
    },
  })

  if (data && data.data.error) {
    return (
      <ErrorModal
        errorCode={data.data.code}
        errorMessage={data.data.errors[0].message}
      />
    )
  }

  const { isLoading: isLoadingArquivos, error: errorArquivos, data: dataArquivos } = useQuery({
    queryKey: ['arquivosData', index],
    queryFn: async () => {
      const response = await fetchApi(process.env.NEXT_PUBLIC_API_URL + 'arquivos?aula_id=' + data.data.data[index].id);

      if (response.isError) {
        throw response;
      } else {
        return response;
      }
    },
    enabled: !isLoading,
  });

  if (dataArquivos && dataArquivos.data.error) {
    return (
      <ErrorModal
        errorCode={dataArquivos.data.code}
        errorMessage={dataArquivos.data.errors[0].message}
      />
    )
  }

  if (dataArquivos && dataArquivos.isError || data && data.isError) {
    return (
      <ErrorModal
        errorCode="500"
        errorMessage="Ocorreu um erro interno."
      />
    )
  }

  if (isLoading || isLoadingArquivos) {
    return (
      <main>
        <div className={modal ? "w-3/4 overflow-hidden" : "w-full"}>
          <div className="flex items-center justify-center h-screen">
            <div className="border-t-4 border-verde border-solid w-16 h-16 rounded-full animate-spin"></div>
          </div>
        </div>
        <div className={`fixed top-0 right-0 h-screen w-1/4 bg-white border-l-2 border-gray-200 shadow-lg z-50 ${modal ? "block" : "hidden"}`}>
          <div className="flex items-center justify-between p-9 border-cinza_c2 border-b-2">
          </div>
          <div className="flex items-center justify-center h-screen">
            <div className="border-t-4 border-verde border-solid w-16 h-16 rounded-full animate-spin"></div>
          </div>
        </div>
      </main>
    )
  }

  const nextAula = () => {
    if (data && index < data.data.data.length - 1) {
      setIndex(index + 1);
    }
  };

  return (
    <main className="flex w-full">
      <div className={modal ? "w-3/4 overflow-hidden" : "w-full"}>
        <div className="flex flex-col gap-4">
          <ReactPlayer
            url={(data.data.data[index].video).split('&list=')[0]}
            controls
            width="100%"
            height="700px"
          />
          <button
            type="button"
            className={modal ? "hidden" : "block"}
            onClick={() => { setModal(true) }}
          >
            <Image
              className="absolute top-20 -right-24 z-50 opacity-50 hover:opacity-90 hover:right-0 duration-500"
              src="/conteudo.png"
              alt="botão de abrir o modal."
              width={130}
              height={40}
            />
          </button>
        </div>
        <div className={modal ? "" : "w-full flex items-center justify-center"}>
          <div className={modal ? "" : "w-9/12"}>
            <div className="flex items-center justify-between p-3">
              <h1 className="w-full text-center text-2xl">{data && data.data.data[index].titulo}</h1>
              <Button className="w-1/12" texto="Finalizar" largura="10rem" onClick={nextAula}></Button>
            </div>

            <p className="text-justify p-3">{data && data.data.data[index].descricao}</p>

            <div>
              <h2 className="pl-3 text-xl">Conteúdo em arquivo</h2>
              {dataArquivos && dataArquivos.data.data?.map((arquivo) => {
                if (arquivo.tipo == "conteúdo") {
                  return (
                    <div key={arquivo.url} className="flex items-center p-3">
                      <Image
                        src="/pdf-image.png"
                        alt="imagem se um pdf."
                        width={24}
                        height={24}
                      />
                      <button type="button" onClick={() => baixarArquivo(arquivo.url)} className="pl-2 text-sm">
                        {arquivo.url.split('/').pop()}
                      </button>
                    </div>
                  );
                }
                return null
              })}
              <h3 className="pt-3 pl-3">Gabarito</h3>
              {dataArquivos && dataArquivos.data.data?.map((arquivo) => {
                if (arquivo.tipo == "gabarito") {
                  return (
                    <div key={arquivo.url} className="flex items-center p-3">
                      <Image
                        src="/pdf-image.png"
                        alt="imagem se um pdf."
                        width={24}
                        height={24}
                      />
                      <button type="button" onClick={() => baixarArquivo(arquivo.url)} className="pl-2 text-sm">
                        {arquivo.url.split('/').pop()}
                      </button>
                    </div>
                  );
                }
                return null
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Modal */}
      <div className={`fixed top-0 right-0 h-screen w-1/4 bg-white border-l-2 border-gray-200 shadow-lg z-50 ${modal ? "block" : "hidden"}`}>
        <div className="flex items-center justify-between p-5 border-cinza_c2 border-b-2">
          <p className="text-xl">Conteúdo do Modulo</p>
          <button type="button" onClick={() => { setModal(false) }}>
            <Image
              className="mr-5"
              src="/x.png"
              alt="Fechar Modal"
              width={18}
              height={18}
            />
          </button>
        </div>
        {/* Adicionando rolagem no conteúdo do modal */}
        <div className="overflow-y-auto h-full">
          {data && data.data.data?.map((aula, index) => (
            <div className="flex items-center justify-start p-3" key={index}>
              <Image
                src="/check.png"
                alt="imagem se um pdf."
                width={18}
                height={18}
              />
              <button className="ml-3 text-left" onClick={() => { setIndex(index) }}>
                {aula.titulo}
              </button>
            </div>
          ))}
        </div>
      </div>
    </main>
  )
}