// DashboardLayout.js
import PropTypes from 'prop-types'
import { Layout, Flex } from 'antd'
import { useLocation } from 'react-router-dom'
import ProductionSidebar from './Production/ProductionSidebar'
import InventorySidebar from './Inventory/InventorySidebar'
import ManagementSidebar from './Management/ManagementSidebar'
import DashboardNavigation from './common/DashboardNavigation'
import DashboardBreadcrumb from './common/DashboardBreadcrumb'
import DeveloperSidebar from './Developer/DeveloperSidebar'
import { useThemeContext } from './context/ThemeContext'

const { Content } = Layout

const DashboardLayout = ({ children }) => {
  const location = useLocation()
  const isProduction = location.pathname.startsWith('/dashboard/production')
  const isInventory = location.pathname.startsWith('/dashboard/inventory')
  const isManagement = location.pathname.startsWith('/dashboard/management')
  const isDeveloper = location.pathname.startsWith('/dashboard/developer')

  const { isDarkMode } = useThemeContext()

  return (
    <Layout
      style={{ height: 'var(--unit-100vh)' }}
      className={isDarkMode ? 'dark-mode' : 'light-mode'}
    >
      <DashboardNavigation />
      <Layout>
        {isProduction ? (
          <ProductionSidebar />
        ) : isInventory ? (
          <InventorySidebar />
        ) : isManagement ? (
          <ManagementSidebar />
        ) : isDeveloper ? (
          <DeveloperSidebar />
        ) : (
          <ProductionSidebar /> // Default to production sidebar
        )}
        <Layout style={{ padding: '24px' }}>
          <Content>
            <Flex vertical style={{ height: '100%' }} gap='20px'>
              <Flex justify='space-between'>
                <DashboardBreadcrumb style={{ margin: '16px 0' }} />
              </Flex>

              {children}
            </Flex>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

DashboardLayout.propTypes = {
  children: PropTypes.node.isRequired
}

export default DashboardLayout