import PageContent from "./PageContent"
import LeftSidebar from "./LeftSidebar"
import { useSelector, useDispatch } from 'react-redux'
import RightSidebar from './RightSidebar'
import { useEffect } from "react"
import { removeNotificationMessage } from "@/Components/features/common/headerSlice"
import ModalLayout from "./ModalLayout"
import { themeChange } from 'theme-change';

function Layout({ children }) {
  const dispatch = useDispatch()
  const { newNotificationMessage, newNotificationStatus } = useSelector(state => state.header)

  useEffect(() => {
    themeChange(false)
  }, [])

  useEffect(() => {
    if (newNotificationMessage !== "") {
      if (newNotificationStatus === 1) NotificationManager.success(newNotificationMessage, 'Success')
      if (newNotificationStatus === 0) NotificationManager.error(newNotificationMessage, 'Error')
      dispatch(removeNotificationMessage())
    }
  }, [newNotificationMessage])

  return (
    <>
      <div className="drawer  lg:drawer-open">
        <input id="left-sidebar-drawer" type="checkbox" className="drawer-toggle" />
        <PageContent>{children}</PageContent>
        <LeftSidebar />
      </div>

      <RightSidebar />
      <ModalLayout />

    </>
  )
}

export default Layout