import React from 'react'
import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import ProductionIcon from '../../Icons/ProductionIcon'
import PrinterIcon from '../../Icons/PrinterIcon'
import JobIcon from '../../Icons/JobIcon'
import GCodeFileIcon from '../../Icons/GCodeFileIcon'

const items = [
  {
    key: 'overview',
    icon: <ProductionIcon />,
    label: 'Overview',
    path: '/dashboard/production/overview'
  },
  { type: 'divider' },
  {
    key: 'printers',
    icon: <PrinterIcon />,
    label: 'Printers',
    path: '/dashboard/production/printers'
  },
  {
    key: 'jobs',
    icon: <JobIcon />,
    label: 'Jobs',
    path: '/dashboard/production/jobs'
  },
  {
    key: 'gcodefiles',
    icon: <GCodeFileIcon />,
    label: 'GCode Files',
    path: '/dashboard/production/gcodefiles'
  }
]

const routeKeyMap = {
  '/dashboard/production/overview': 'overview',
  '/dashboard/production/printers': 'printers',
  '/dashboard/production/jobs': 'jobs',
  '/dashboard/production/gcodefiles': 'gcodefiles'
}

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

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

export default ProductionSidebar