import React, { useState, useEffect, use } from 'react';
import { useSession } from "next-auth/react"
import Link from 'next/link';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import axiosInstance from '../../../src/axiosSecure';
import Layout from "../../../components/layout"
import Shift from '../../../components/calendar/ShiftComponent';
import { DayOfWeek, UserRole } from '@prisma/client';
import { env } from 'process'
import ShiftComponent from '../../../components/calendar/ShiftComponent';
//import { set } from 'date-fns';
const common = require('src/helpers/common');
import { toast } from 'react-toastify';
import ProtectedRoute from '../../../components/protectedRoute';
import ConfirmationModal from '../../../components/ConfirmationModal';

const SchedulePage = () => {
    const { data: session } = useSession();
    const [htmlContent, setHtmlContent] = useState(""); // State to hold fetched HTML content

    useEffect(() => {
        const fetchHtmlContent = async () => {
            try {
                const response = await axiosInstance.get('/api/schedule?year=2024&month=1', { responseType: 'text' });
                setHtmlContent(response.data); // Set the fetched HTML content in state
            } catch (error) {
                console.error("Failed to fetch schedule:", error);
                // Handle error (e.g., display an error message)
            }
        };

        fetchHtmlContent(); // Call the function to fetch HTML content
    }, []); // Empty dependency array means this effect runs once on component mount

    return (
        <Layout>
            <ProtectedRoute deniedMessage="">
                <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
            </ProtectedRoute>
        </Layout>
    );
};

export default SchedulePage;