import React, { useEffect, useRef, useState } from 'react';
import { Button, Grid } from '@mui/material';
import { GeneralConfirmWindow } from "../../utils/CommonFunction";
import axios from 'axios';
import {apiPath} from "../../auth/utils";
import {
    GET_PDF_PATH,
    POST_PDF_PATH
} from "../../utils/ApiPathConst";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {ThemeProvider} from "@emotion/react";
import {useNavigate} from "react-router-dom";

// Import your chosen commercial PDF SDK (e.g., PSPDFKit)
import PSPDFKit from 'pspdfkit';

function PDF() {
    const viewerRef = useRef(null); // Ref for the DOM element where PDF will render
    const instanceRef = useRef(null); // Ref for the PSPDFKit instance
    const [pdfLoaded, setPdfLoaded] = useState(false);
    const [viewerLoaded, setViewerLoaded] = useState(false);
    const [template,setTemplate] = useState();
    const [viewInstance,setViewInstance] = useState();
    const navigate = useNavigate()

    const loadPdfTemplate = async () => {
        // if (!pdfLoaded) {
            axios.get(`${apiPath}${GET_PDF_PATH}`, {
                responseType: 'arraybuffer', // Essential for binary data
            })
            .then((response) => {
                if (response.status === 200) {
                    setTemplate(response.data);
                    setPdfLoaded(true);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
        // }
    };

    const loadPdfViewer = async () => {console.log(`PDF loaded = ${pdfLoaded}`);
        if (pdfLoaded && viewerRef.current) {
            try {
                //New try
                console.log(typeof(template));
                const pdfBlob = new Blob([template], { type: 'application/pdf' });
                const pdfUrl = URL.createObjectURL(pdfBlob);
                
                console.log('Template: ');
                console.log(template.data);
                console.log('URL: ');
                console.log(pdfUrl);
                console.log('Viewer: ');
                console.log(viewerRef.current);
                PSPDFKit.unload(viewerRef.current);
                await PSPDFKit.load({//click into load
                    container: viewerRef.current,
                    // container: '#viewer',
                    document: pdfUrl,
                    // baseUrl: `./sdk/`, // Path to SDK assets   
                    baseUrl: `http://localhost:3000/sdk/`, // Path to SDK
                    // baseUrl: `${window.location.protocol}//${window.location.host}/${import.meta.env.BASE_URL}`,
                    // baseUrl: `https://cdn.jsdelivr.net/npm/pspdfkit@VERSION/dist/`, // Path to SDK assets    so this is work?
                    // baseUrl: `${process.env.PUBLIC_URL}/`, // Path to SDK assets   
                    disableWebAssemblyStreaming: true,
                    initialViewState: new PSPDFKit.ViewState({
                        sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
                    })
                })
                .then(instance => {
                    URL.revokeObjectURL(pdfUrl);
                    setViewInstance(instance);
                    console.log('instance: ');
                    console.log(instance);
                    setViewerLoaded(true);
                });

                // instanceRef.current = instance;

                // 3. Clean up on component unmount
                // return () => {
                //     if (instance) {
                //         instance.unload(); // Unload SDK instance
                //     }
                //     URL.revokeObjectURL(pdfUrl); // Revoke the Blob URL
                // };

            } catch (error) {
                console.error('Error loading PDF:', error);
            }
        }
    };

    useEffect(() => {
        loadPdfTemplate();
    }, []);
    
    useEffect(() => {
        loadPdfViewer();
    }, [viewerRef, pdfLoaded]);

    const handleSavePdf = async () => {
        if (viewInstance.current) {console.log("tetes");
            try {
                // Export the filled PDF from the SDK as an ArrayBuffer
                const arrayBuffer = await viewInstance.current.exportPDF();
                const filledPdfBlob = new Blob([arrayBuffer], { type: 'application/pdf' });

                // Create FormData to send the file to Spring Boot
                const formData = new FormData();
                formData.append('file', filledPdfBlob, 'filled_form.pdf');

                // Send the filled PDF to your Spring Boot backend's save endpoint
                const response = await axios.post(`${apiPath}${POST_PDF_PATH}`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data' // Important for file uploads
                    }
                });
                console.log('PDF saved on server:', response.data);
                alert('PDF saved successfully on server!');
            } catch (error) {
                console.error('Error saving PDF:', error);
                alert('Failed to save PDF.');
            }
        }
    };

    const handlePrintPdf = () => {
        if (viewInstance.current) {
            // Trigger the SDK's built-in print functionality
            viewInstance.current.print();
        }
    };

    // Confirmation Window //
    const [isWindowOpen, setIsWindowOpen] = useState(false);

    const handleClose = () => {
        setIsWindowOpen(false);
    };

    const handleBackClick = () => {
        setIsWindowOpen(true);
    };

    const handleBack = () => {
        navigate('/client');
    };

    return (
        <ThemeProvider theme={LIONER_BUTTON_THEME}>
        <div className="pdf-form-page"> {/* This is your 'pdfForm' page */}
            <header className="page-header">
                <Grid item>
                    <Grid container>
                        <Grid item sx={{ml:3, mr:1.5, mb:2}}>
                            <Button
                                variant="contained"
                                type="submit"
                                color="save"
                                disabled={!viewerLoaded}
                                // onClick={handleSavePdf}
                            >
                                Save
                            </Button>
                        </Grid>
                        <Grid item sx={{ml:{xs:1.5, md:1.5, lg:1.5}, mr:1.5, mb:2}}>
                            <Button
                                variant="contained"
                                color="cancel"
                                onClick={viewerLoaded ? handleBackClick : handleBack}
                                >
                                Cancel
                            </Button>
                            <GeneralConfirmWindow
                                isWindowOpen={isWindowOpen}
                                title={"Back to previous page"}
                                //content={`Confirm to delete Event "${clientDetail.name}" ?`}
                                content={`Are you sure to leave this page?\nAny unsaved progress will be lost.`}
                                onNormalClose={handleClose}
                                onConfirmClose={handleBack}
                            />
                        </Grid>
                    </Grid>
                </Grid>
                {/* {pdfLoaded ? (
                    <div className="action-buttons">
                        <button onClick={handleSavePdf} className="action-button save-button">
                            Save Filled PDF
                        </button>
                        <button onClick={handlePrintPdf} className="action-button print-button">
                            Print PDF
                        </button>
                    </div>
                ) : (
                    <p>Loading PDF viewer...</p>
                )} */}
            </header>
            <div
                // id={viewerRef}
                ref={viewerRef}
                // className="pdf-viewer-container"
                style={{
                    width: '100%',
                    height: 'calc(100vh - 180px)', // Adjust height based on header/footer
                    border: '1px solid #ccc'
                }}
            >
                {/* The PDF SDK will render the PDF viewer here */}
            </div>
        </div>
        </ThemeProvider>
    );
}

export default PDF;