import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import ClientIcon from '../../Icons/ClientIcon'
import SalesIcon from '../../Icons/SalesIcon'

import SalesOrderIcon from '../../Icons/SalesOrderIcon'

const items = [
  {
    key: 'overview',
    label: 'Overview',
    icon: <SalesIcon />,
    path: '/dashboard/sales/overview'
  },
  { type: 'divider' },
  {
    key: 'clients',
    label: 'Clients',
    icon: <ClientIcon />,
    path: '/dashboard/sales/clients'
  },
  {
    key: 'salesorders',
    label: 'Sales Orders',
    icon: <SalesOrderIcon />,
    path: '/dashboard/sales/salesorders'
  }
]

const routeKeyMap = {
  '/dashboard/sales/overview': 'overview',
  '/dashboard/sales/clients': 'clients',
  '/dashboard/sales/salesorders': 'salesorders'
}

const SalesSidebar = (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 SalesSidebar