import React, { useEffect, useRef, useState } from 'react';
import { Button, Grid } from '@mui/material';
import { GeneralConfirmWindow, notifySaveSuccess } from "../../../utils/CommonFunction";
import axios from 'axios';
import {apiPath} from "../../../auth/utils";
import {
    GET_PDF_TEMPLATE_PATH,
    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 {useForm} from "react-hook-form";
import {useLocation, useParams} from "react-router-dom";

import { CollectionsBookmarkRounded } from '../../../../node_modules/@mui/icons-material/index';

function Template() {
    const viewerRef = useRef(null); // Ref for the DOM element where PDF will render
    const [pdfLoaded, setPdfLoaded] = useState(false);
    const [viewerLoaded, setViewerLoaded] = useState(false);
    const [viewInstance,setViewInstance] = useState();
    const [pdfBytes, setPdfBytes] = useState();
    const [record, setRecord] = useState();
    
    const navigate = useNavigate()
    const params = useParams();
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const refId = queryParams.get("refId");

    const loadPdfForm = async (id, templateId = 0) => {
        if (!pdfLoaded) {
            if (id > 0) {
                // axios.get(`${apiPath}${GET_PDF_TEMPLATE_PATH}`, {
                axios.get(`${apiPath}${GET_PDF_PATH}/${id}`, {
                    // responseType: 'arraybuffer', // Essential for binary data
                })
                .then((response) => {
                    if (response.status === 200) {
                        // setRecord(rec => {
                        //     const { ["blobValue"]: _, ...newData } = response.data; // Destructure to remove blobValue
                        //     return newData;
                        // });
                        const res = response.data;
                        setRecord({ // WIP - allow to update all record
                            id : res.id,
                            clientId: res.clientId,
                            templateId: res.templateId
                        })

                        //Convert Base64 to binary data
                        const byteChar = atob(response.data.blobValue);
                        const byteNum = new Uint8Array(byteChar.length);
                        
                        for (let i = 0; i < byteChar.length; i++) {
                            byteNum[i] = byteChar.charCodeAt(i);
                        }

                        setPdfBytes(byteNum);
                        setPdfLoaded(true);
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });

            } else {
                axios.get(`${apiPath}${GET_PDF_TEMPLATE_PATH}`, {
                    responseType: 'arraybuffer', // Essential for binary data
                })
                .then((response) => {
                    if (response.status === 200) {
                        setPdfBytes(response.data);
                        setPdfLoaded(true);
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
            }
        }
    };

    const loadPdfViewer = async () => {
        if (pdfLoaded && viewerRef.current && !viewerLoaded) {
            
        }
    };

    useEffect(() => {
        if (params.id !== null) {
            const pdfData = (params.id).split("T");
    
            if (pdfData[0] > 0) {   // Existing Record
                loadPdfForm(pdfData[0]);
            } else {    // New Record
                setRecord({
                    id: -1,
                    clientId: pdfData[0] * -1, //If PDF ID is negative, convert it to client ID
                    templateId: pdfData[1],});
                loadPdfForm(-1, pdfData[1]);    // Load new Template
            }
        }
    }, [params.id]);

    // useEffect(() => {
    //     if (record) {
    //         console.log(record);
    //         loadPdfForm();
    //     }
    // }, [record]);
    
    useEffect(() => {
        loadPdfViewer();
    }, [viewerRef.current, pdfLoaded]);

    const handleSavePdf = async () => {
        if (viewInstance) {
            try {
                // Export the filled PDF from the SDK as an ArrayBuffer
                const arrayBuffer = await viewInstance.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');
                formData.append('record', JSON.stringify(record));
                // 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);
                notifySaveSuccess();

                // if (viewerLoaded) {
                //     await PSPDFKit.unload(viewerRef.current);
                // }
                navigate(`/pdf/${record.clientId}`);
            } 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 = async () => {
        // if (viewerLoaded) {
        //     await PSPDFKit.unload(viewerRef.current);
        // }
        navigate(`/pdf/${record.clientId}`);
    };

    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 Template;