import Header from "./header"
import Link from 'next/link'
import Footer from "./footer"
import Sidebar from "./sidebar"
import type { ReactNode } from "react"
import { useRouter } from 'next/router'
import { useEffect, useState } from "react";
import Body from 'next/document'

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function Layout({ children }: { children: ReactNode }) {
  const router = useRouter()
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  // auto resize for tablets: disabled.
  // useEffect(() => {
  //   // Function to check and set the state based on window width
  //   const handleResize = () => {
  //     if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices
  //       setIsSidebarOpen(false);
  //     } else {
  //       setIsSidebarOpen(true);
  //     }
  //   };
  //   // Set initial state
  //   handleResize();
  //   // Add event listener
  //   window.addEventListener('resize', handleResize);
  //   // Cleanup
  //   return () => window.removeEventListener('resize', handleResize);
  // }, []);

  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (

    // <div className="h-screen w-screen" >
    // <div className="flex flex-col">
    //   <div className="flex flex-row h-screen">
    //     <ToastContainer />
    //     <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
    //     <main className={`pr-10 transition-all duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>


    <div className="">
      <div className="flex flex-col">
        <div className="flex flex-row h-[90vh]  w-screen  ">
          <ToastContainer position="top-center" style={{ zIndex: 9999 }} />
          <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
          <main className={`pr-10 transition-all h-[90vh]  duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
            {children}
          </main>
        </div>
        {/* <div className="justify-end items-center text-center ">
          <Footer />
        </div> */}
      </div>
    </div>
  );
}