'use client';

import React, { useEffect, useState } from 'react';
import NavBarComponent from '@/components/navBar';
import HeaderComponent from '@/components/header';
import '../../app/globals.css';
import '../../app/css/custom-style.css';
import { ConfigProvider, Layout } from 'antd';
import theme from '../../app/theme/themeConfig';
import { useSession } from 'next-auth/react';

const { Content } = Layout;
const AfterLoginLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const isScreenSmall = () => window.innerWidth <= 991;
  const [isMobileView, setIsMobileView] = useState(isScreenSmall());
  const [collapsed, setCollapsed] = useState(false);

  const { data: session } = useSession();

  const handleMainContentClick = () => {
    setCollapsed(false);
    setIsMobileView(true);
  };

  // Update collapsed state when screen size changes
  useEffect(() => {
    const handleResize = () => {
      setIsMobileView(isScreenSmall()); // Adjust break point as needed
      setCollapsed(false);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  useEffect(() => {
    if (!session?.user) {
      window.location.href = '/auth/login';
    }
  }, [session?.user]);
  // const userRole = session?.user?.role?.name
  return (
    <ConfigProvider theme={theme}>
      <Layout className="bg-layout main-layout">
        <HeaderComponent
          collapsed={collapsed}
          mobileView={isMobileView}
          handleMobileMenuToggle={() => {
            setIsMobileView(!isMobileView);
          }}
          toggleCollapsed={() => {
            setCollapsed(!collapsed);
          }}
        />
        <Layout className="bg-layout">
          <NavBarComponent
            collapsed={collapsed}
            mobileView={isMobileView}
            handleMobileMenuToggle={() => {
              setIsMobileView(!isMobileView);
            }}
          />
          <Content className="after-login-main-content" onClick={() => handleMainContentClick() }>{children}</Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default AfterLoginLayout;