import React, { useState } from 'react';
import Layout from "../components/layout";
import fs from 'fs';
import path from 'path';
import { url } from 'inspector';

const PDFViewerPage = ({ pdfFiles }) => {


    return (
        <Layout>
            <h1 className="text-3xl font-bold">Разрешителни</h1>
            <div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* Adjust the 100px based on your header/footer size */}

                {pdfFiles.map((file, index) => (
                    // <React.Fragment key={file.name}>
                    //     {index > 0 && <div className="bg-gray-400 w-px h-6"></div>} {/* Vertical line separator */}
                    //     <a
                    //         href={file.url}
                    //         target="_blank"
                    //         className={`text-lg py-2 px-4 bg-gray-200 text-gray-800 hover:bg-blue-500 hover:text-white ${index === 0 ? 'rounded-l-full' : index === pdfFiles.length - 1 ? 'rounded-r-full' : ''}`}
                    //     >
                    //         {file.name}
                    //     </a>
                    // </React.Fragment>
                    <div style={{ width: 'calc(100% - 1rem)', height: '100%', margin: '0 0' }}>
                        < object data={file.url} type="application/pdf" style={{ width: '100%', height: '100%' }}>
                            <p>Вашият браузър не поддържа PDFs файлове. Моля свалете файла за да го разгледате: <a href={file.url}>Свали {file.name}</a>.</p>
                            <p>Your browser does not support PDFs. Please download the PDF to view it: <a href={file.url}> {file.name}</a>.</p>
                        </object>
                    </div>

                ))}
            </div>
        </Layout >
    );
};

export default PDFViewerPage;


export const getServerSideProps = async (context) => {
    const permitsFolder = '/public/content/permits/';
    //get all the files in the permits folder order them by date desc and display them
    const pdfFiles = fs.readdirSync(path.join(process.cwd(), permitsFolder)).map(file => {
        return {
            name: file,
            date: fs.statSync(path.join(process.cwd(), permitsFolder, file)).mtime,
            url: `/content/permits/${file}`
        };
    }).sort((a, b) => b.date - a.date)
        .map(file => {
            return {
                name: file.name,
                url: file.url
            };
        }
        );
    return {
        props: {
            pdfFiles
        }
    };
}
// export const getServerSideProps = async (context) => {