import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import FilamentStockIcon from '../../Icons/FilamentStockIcon'
import PartStockIcon from '../../Icons/PartStockIcon'
import ProductStockIcon from '../../Icons/ProductStockIcon'
import StockEventIcon from '../../Icons/StockEventIcon'
import StockAuditIcon from '../../Icons/StockAuditIcon'
import PurchaseOrderIcon from '../../Icons/PurchaseOrderIcon'
import ShipmentIcon from '../../Icons/ShipmentIcon'
import OrderItemIcon from '../../Icons/OrderItemIcon'
import InventoryIcon from '../../Icons/InventoryIcon'

const items = [
  {
    key: 'overview',
    label: 'Overview',
    icon: <InventoryIcon />,
    path: '/dashboard/inventory/overview'
  },
  { type: 'divider' },
  {
    key: 'filamentstocks',
    label: 'Filament Stocks',
    icon: <FilamentStockIcon />,
    path: '/dashboard/inventory/filamentstocks'
  },
  {
    key: 'partstocks',
    label: 'Part Stocks',
    icon: <PartStockIcon />,
    path: '/dashboard/inventory/partstocks'
  },
  {
    key: 'productstocks',
    label: 'Product Stocks',
    icon: <ProductStockIcon />,
    path: '/dashboard/inventory/productstocks'
  },
  { type: 'divider' },
  {
    key: 'purchaseorders',
    label: 'Purchase Orders',
    icon: <PurchaseOrderIcon />,
    path: '/dashboard/inventory/purchaseorders'
  },
  {
    key: 'orderitems',
    label: 'Order Items',
    icon: <OrderItemIcon />,
    path: '/dashboard/inventory/orderitems'
  },
  {
    key: 'shipments',
    label: 'Shipments',
    icon: <ShipmentIcon />,
    path: '/dashboard/inventory/shipments'
  },
  { type: 'divider' },
  {
    key: 'stockevents',
    label: 'Stock Events',
    icon: <StockEventIcon />,
    path: '/dashboard/inventory/stockevents'
  },
  {
    key: 'stockaudits',
    label: 'Stock Audits',
    icon: <StockAuditIcon />,
    path: '/dashboard/inventory/stockaudits'
  }
]

const routeKeyMap = {
  '/dashboard/inventory/overview': 'overview',
  '/dashboard/inventory/filamentstocks': 'filamentstocks',
  '/dashboard/inventory/partstocks': 'partstocks',
  '/dashboard/inventory/productstocks': 'productstocks',
  '/dashboard/inventory/stockevents': 'stockevents',
  '/dashboard/inventory/stockaudits': 'stockaudits',
  '/dashboard/inventory/purchaseorders': 'purchaseorders',
  '/dashboard/inventory/orderitems': 'orderitems',
  '/dashboard/inventory/shipments': 'shipments'
}

const InventorySidebar = (props) => {
  const location = useLocation()
  const selectedKey = (() => {
    const match = Object.keys(routeKeyMap).find((path) => {
      const pathSplit = path.split('/')
      const locationPathSplit = location.pathname.split('/')
      if (pathSplit.length > locationPathSplit.length) return false
      for (let i = 0; i < pathSplit.length; i++) {
        if (pathSplit[i] !== locationPathSplit[i]) return false
      }
      return true
    })
    return match ? routeKeyMap[match] : 'overview'
  })()

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

export default InventorySidebar