import React from 'react'
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'

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: 'hosts',
    icon: <HostIcon />,
    label: 'Hosts',
    path: '/dashboard/management/hosts'
  },
  {
    key: 'users',
    icon: <PersonIcon />,
    label: 'Users',
    path: '/dashboard/management/users'
  },
  {
    key: 'settings',
    icon: <SettingsIcon />,
    label: 'Settings',
    path: '/dashboard/management/settings'
  },
  {
    key: 'auditlogs',
    icon: <AuditLogIcon />,
    label: 'Audit Logs',
    path: '/dashboard/management/auditlogs'
  }
]

if (process.env.NODE_ENV === '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/hosts': 'hosts'
}

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
