Untitled

import React, { useState, useCallback, useEffect } from "react";
import { useDropzone } from "react-dropzone";
import * as XLSX from 'xlsx';
import { push, ref, onValue, update } from 'firebase/database';
import { GoUpload } from "react-icons/go";
import { db } from "../dbconfig/firebaseConfig";
import { Modal } from "bootstrap";
import { FcHighPriority } from "react-icons/fc";
import SubjectsFile from '../excelTemplate/SubjectTest.xlsx';
export default function ImportFiles() {
    const [excelData, setExcelData] = useState(null);
    const [excelFileName, setExcelFileName] = useState(null);
    const [selectedData, setSelectedData] = useState(null);
    const [department, setDepartment] = useState([]);
    const [modal, setModal] = useState(null);
    const [headerCount, setHeaderCount] = useState(0);
    const [fileHeaders, setFileHeaders] = useState([]);
    const [subjectToImport, setSubjectToImport] = useState({
        SubjectCode: '',
        SubjectDescription: '',
        SubjectSchedule: '',
        SubjectSemester: '',
        SubjectTerm: '',
        SubjectTime: ''
    })
    const HeadersAccepted = ['Subject Code','Subject Description','Subject Term','Subject Semester','Subject Schedule','Subject Time'];
    const dbref = ref(db, 'Subjects');
    useEffect(() => {
        const fetchSubjects = () => {
            onValue(dbref, (departmentSnap) => {
                const subjectDepartment = departmentSnap.val();
                if (subjectDepartment) {
                    const subjectArray = Object.entries(subjectDepartment).map(([key, value]) => ({
                        key, ...value
                    }));
                    setDepartment(subjectArray);
                } else {
                    setDepartment([]);
                }
            });
        }
        fetchSubjects();
        return () => {
            onValue(dbref, () => { });
        };
    }, []);
    const onDrop = useCallback((acceptedFiles) => {
        if (acceptedFiles.length > 0) {
            const file = acceptedFiles[0];
            if (!file.name.endsWith('.xls') && !file.name.endsWith('.xlsx')) {
                console.log('invalid file');
                const invalidFile = new Modal(document.getElementById('invalidFile'));
                invalidFile.show();
                return;
            }
    
            setExcelFileName(file.name);
            const reader = new FileReader();
            reader.onload = (e) => {
                const data = e.target.result;
                const workbook = XLSX.read(data, { type: "binary" });
                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                const headers = jsonData[0];
    
                if (
                    HeadersAccepted.length !== headers.length ||
                    !HeadersAccepted.every((acceptedHeader) => headers.includes(acceptedHeader))
                ) {
                    const invalidHeaders = new Modal(document.getElementById('invalidHeaders'));
                    invalidHeaders.show();
                    return;
                }
    
                setExcelData(jsonData);
                setHeaderCount(headers.length);
                setFileHeaders(headers);
            };
            reader.readAsBinaryString(file);
        }
    }, [HeadersAccepted]);
    const { getRootProps, getInputProps } = useDropzone({ onDrop });
    const importSubject = (row) => {
        setSelectedData(row);
        console.log('selected subject', { ...row });
        console.log(headerCount);
        const headers = excelData[0];
        const selectDepartment = new Modal(document.getElementById('selectDepartment'));
        selectDepartment.show();
        setModal(selectDepartment);
    }


    const saveSelectedDepartments = () => {
        const selectedDepartments = Array.from(document.querySelectorAll('input[name="selectedDepartments"]:checked')).map(checkbox => checkbox.value);
        console.log(selectedData[0], selectedData[2]);

    }
    const downloadTemplate = () =>{
        const template = SubjectsFile;
        window.location.href = template;
    }
    return (
        <div className="container-fluid">
            <div className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh" }}>
                <div className="card text-center">
                    <div className="card-content">
                        <div className="card-header">
                            <div className="card-title">
                                <span className="text-dark text-uppercase h5 px-3">Import <b>Excel</b> Files</span>
                            </div>
                        </div>
                        <div className="card-body">
                            <div {...getRootProps()} style={{ cursor: "pointer" }}>
                                <input {...getInputProps()} />
                                <p><b className="h4">Excel</b> file here, click here to select one</p>
                            </div>
                            {excelData && (
                                <div className="mt-3">
                                    <h5>{excelFileName}</h5>
                                    <table className="table table-bordered">
                                        <thead>
                                            <tr>
                                                {excelData[0].map((header, index) => (
                                                    <React.Fragment key={index}>
                                                        <th>{header}</th>
                                                        {index === excelData[0].length - 1 && <th>Action</th>}
                                                    </React.Fragment>
                                                ))}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {excelData.slice(1).map((row, rowIndex) => (
                                                <tr key={rowIndex}>
                                                    {row.map((cell, cellIndex) => (
                                                        <React.Fragment key={cellIndex}>
                                                            <td>{cell}</td>
                                                            {cellIndex === row.length - 1 && (
                                                                <td>
                                                                    <button className="btn btn-primary" onClick={() => { importSubject(row) }}>
                                                                        import <GoUpload />
                                                                    </button>
                                                                </td>
                                                            )}
                                                        </React.Fragment>
                                                    ))}
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            )}
                        </div>
                        <div className="card-footer">
                            <button className="btn btn-info text-light" onClick={downloadTemplate}>Download Excel Template</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="selectDepartment" className="modal fade" tabIndex="-1" role="dialog">
                <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">Select Department</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div className="modal-body text-success">
                            <center>
                                {department.map((subject) => (
                                    <div key={subject.key} className="form-check">
                                        <input
                                            type="checkbox"
                                            id={`department_${subject.key}`}
                                            name="selectedDepartments"
                                            value={subject.key}
                                            className="form-check-input"
                                        />
                                        <label htmlFor={`department_${subject.key}`} className="form-check-label">
                                            {subject.key}
                                        </label>
                                    </div>
                                ))}
                            </center>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-bs-dismiss='modal'>Cancel</button>
                            <button type="button" className="btn btn-primary" onClick={saveSelectedDepartments}>Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="invalidHeaders" className="modal fade" tabIndex="-1" role="dialog">
    <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
            <div className="modal-header">
                <div className="modal-title">Invalid File</div>
            </div>
            <div className="modal-body h3 text-dark">
                <center>
                    Please check your file. File should include all of the following Headers:
                    <ul className="list-unstyled">
                        {HeadersAccepted.map((acceptedHeader, index) => (
                            <li key={index} className="text-info text-danger text-uppercase">{acceptedHeader}</li>
                        ))}
                    </ul>
                </center>
            </div>
            <div className="modal-footer">
                <button className="btn btn-secondary" data-bs-dismiss='modal'>Close</button>
            </div>
        </div>
    </div>
</div>
            <div id="ActionModal" className="modal fade" tabIndex="-1" role="dialog">
                <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <div className="modal-title"><p id="modalTitle"></p></div>
                        </div>
                        <div className="modal-body h3 text-dark">
                            <center>
                                <p id="modalBody"></p>
                            </center>
                        </div>
                        <div className="modal-footer">
                            <button className="btn btn-secondary" data-bs-dismiss='modal'>Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="invalidFile" className="modal fade" tabIndex="-1" role="dialog">
                <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <div className="modal-title h3"><FcHighPriority />Invalid File<FcHighPriority /></div>
                        </div>
                        <div className="modal-body h3 text-dark">
                            <center>
                                Don't you get smart with me boi. We asked for <b className="text-danger">Excel File</b> we expect to get <b className="text-danger">Excel File</b> nothing less, nothing more. <p className="text-success">Try this shit one more time, we're banning the shit out of you.</p>
                            </center>
                        </div>
                        <div className="modal-footer">
                            <button className="btn btn-secondary" data-bs-dismiss='modal'>Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}