import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import { Typography } from 'antd'

const { Text } = Typography

const items = [
  {
    key: 'sessionstorage',
    label: 'Session Storage',
    icon: <Text>🗃️</Text>,
    path: '/dashboard/developer/sessionstorage'
  },
  {
    key: 'authcontextdebug',
    label: 'Auth Debug',
    icon: <Text>🔐</Text>,
    path: '/dashboard/developer/authcontextdebug'
  },
  {
    key: 'apicontextdebug',
    label: 'API Debug',
    icon: <Text>🌐</Text>,
    path: '/dashboard/developer/apicontextdebug'
  }
]

const routeKeyMap = {
  '/dashboard/developer/sessionstorage': 'sessionstorage',
  '/dashboard/developer/authcontextdebug': 'authcontextdebug',
  '/dashboard/developer/apicontextdebug': 'apicontextdebug'
}

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

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

export default DeveloperSidebar