import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterDocumentoPersonalizadoGeradoPorId } from "@/requests/CRUD/DocumentosGerados/obterDocumentoPersonalizadoGeradoPorId";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const VisualizarDoc = ()=> {
  const router = useRouter();
  const { query } = router;

  const [documento, setDocumento] = useState<any>();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (query.id) {
      obterDocumentoPersonalizadoGeradoPorId(query.id, query.sigla).then((res) => {
        setIsLoading(false);
        setDocumento(res);
      });
    }
  }, [query.id]);

  return (
    <div className="flex justify-center">
      <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-fit p-10">
        <div>
          <div>Este é seu documento: {documento?.nome_documento_personalizado}</div>
          <div className="flex justify-center">
            {isLoading ? (
              <div className="flex justify-center h-18 my-5">
                <LoaderSun />
              </div>
            ) : (
              <iframe
                src={documento?.link_documento_gerado}
                width="700px"
                height="700px"
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default VisualizarDoc;