import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import FilamentIcon from '../../Icons/FilamentIcon'
import PartIcon from '../../Icons/PartIcon'
import ProductIcon from '../../Icons/ProductIcon'
import VendorIcon from '../../Icons/VendorIcon'
import MaterialIcon from '../../Icons/MaterialIcon'
import NoteTypeIcon from '../../Icons/NoteTypeIcon'
import SettingsIcon from '../../Icons/SettingsIcon'
import AuditLogIcon from '../../Icons/AuditLogIcon'
import DeveloperIcon from '../../Icons/DeveloperIcon'
import PersonIcon from '../../Icons/PersonIcon'
import HostIcon from '../../Icons/HostIcon'
import DocumentPrinterIcon from '../../Icons/DocumentPrinterIcon'
import DocumentTemplateIcon from '../../Icons/DocumentTemplateIcon'
import DocumentIcon from '../../Icons/DocumentIcon'
import DocumentSizeIcon from '../../Icons/DocumentSizeIcon'
import DocumentJobIcon from '../../Icons/DocumentJobIcon'
import FileIcon from '../../Icons/FileIcon'

const items = [
  {
    key: 'filaments',
    icon: <FilamentIcon />,
    label: 'Filaments',
    path: '/dashboard/management/filaments'
  },
  {
    key: 'parts',
    icon: <PartIcon />,
    label: 'Parts',
    path: '/dashboard/management/parts'
  },
  {
    key: 'products',
    icon: <ProductIcon />,
    label: 'Products',
    path: '/dashboard/management/products'
  },
  {
    key: 'vendors',
    icon: <VendorIcon />,
    label: 'Vendors',
    path: '/dashboard/management/vendors'
  },
  {
    key: 'materials',
    icon: <MaterialIcon />,
    label: 'Materials',
    path: '/dashboard/management/materials'
  },
  { type: 'divider' },
  {
    key: 'noteTypes',
    icon: <NoteTypeIcon />,
    label: 'Note Types',
    path: '/dashboard/management/notetypes'
  },
  {
    key: 'documents',
    icon: <DocumentIcon />,
    label: 'Documents',
    children: [
      {
        key: 'documentPrinters',
        icon: <DocumentPrinterIcon />,
        label: 'Document Printers',
        path: '/dashboard/management/documentprinters'
      },
      {
        key: 'documentJobs',
        icon: <DocumentJobIcon />,
        label: 'Document Jobs',
        path: '/dashboard/management/documentjobs'
      },
      {
        key: 'documentTemplates',
        icon: <DocumentTemplateIcon />,
        label: 'Document Templates',
        path: '/dashboard/management/documenttemplates'
      },
      {
        key: 'documentSizes',
        icon: <DocumentSizeIcon />,
        label: 'Document Sizes',
        path: '/dashboard/management/documentsizes'
      }
    ]
  },
  { type: 'divider' },
  {
    key: 'hosts',
    icon: <HostIcon />,
    label: 'Hosts',
    path: '/dashboard/management/hosts'
  },
  { type: 'divider' },
  {
    key: 'users',
    icon: <PersonIcon />,
    label: 'Users',
    path: '/dashboard/management/users'
  },
  {
    key: 'settings',
    icon: <SettingsIcon />,
    label: 'Settings',
    path: '/dashboard/management/settings'
  },
  {
    key: 'files',
    icon: <FileIcon />,
    label: 'Files',
    path: '/dashboard/management/files'
  },
  {
    key: 'auditLogs',
    icon: <AuditLogIcon />,
    label: 'Audit Logs',
    path: '/dashboard/management/auditlogs'
  }
]

if (import.meta.env.MODE === 'development') {
  items.push(
    { type: 'divider' },
    {
      key: 'developer',
      icon: <DeveloperIcon />,
      label: 'Developer',
      path: '/dashboard/developer/sessionstorage'
    }
  )
}

const routeKeyMap = {
  '/dashboard/management/filaments': 'filaments',
  '/dashboard/management/parts': 'parts',
  '/dashboard/management/users': 'users',
  '/dashboard/management/products': 'products',
  '/dashboard/management/vendors': 'vendors',
  '/dashboard/management/materials': 'materials',
  '/dashboard/management/notetypes': 'noteTypes',
  '/dashboard/management/settings': 'settings',
  '/dashboard/management/auditlogs': 'auditLogs',
  '/dashboard/management/files': 'files',
  '/dashboard/management/hosts': 'hosts',
  '/dashboard/management/documentsizes': 'documentSizes',
  '/dashboard/management/documentprinters': 'documentPrinters',
  '/dashboard/management/documenttemplates': 'documentTemplates',
  '/dashboard/management/documentjobs': 'documentJobs'
}

const ManagementSidebar = (props) => {
  const location = useLocation()
  const selectedKey = (() => {
    const match = Object.keys(routeKeyMap).find((path) =>
      location.pathname.startsWith(path)
    )
    return match ? routeKeyMap[match] : 'filaments'
  })()

  return <DashboardSidebar items={items} selectedKey={selectedKey} {...props} />
}

export default ManagementSidebar