import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import type { CMenuEntry } from '@/index'

export function useTopNavigation() {
  const route = useRoute()
  const router = useRouter()

  return computed<CMenuEntry[]>(() => [
    {
      id: 'home',
      label: 'Home',
      icon: '⌂',
      active: route.name === 'home',
      command: () => void router.push({ name: 'home' }),
    },
    {
      id: 'components',
      label: 'Components',
      icon: '▦',
      active: route.path.startsWith('/components'),
      children: [
        {
          id: 'app-bar-menu',
          label: 'AppBar & Menu',
          icon: '☰',
          active: route.name === 'app-bar-menu',
          command: () => void router.push({ name: 'app-bar-menu' }),
        },
        {
          id: 'sidebar',
          label: 'Sidebar',
          icon: '◧',
          active: route.name === 'sidebar',
          command: () => void router.push({ name: 'sidebar' }),
        },
        { type: 'separator' },
        {
          id: 'button',
          label: 'Button',
          icon: '▭',
          active: route.name === 'button',
          command: () => void router.push({ name: 'button' }),
        },
        {
          id: 'form-field',
          label: 'Form Field',
          icon: '▤',
          active: route.name === 'form-field',
          command: () => void router.push({ name: 'form-field' }),
        },
        {
          id: 'input',
          label: 'Input',
          icon: '⌨',
          active: route.name === 'input',
          command: () => void router.push({ name: 'input' }),
        },
        {
          id: 'number-input',
          label: 'Number Input',
          icon: '±',
          active: route.name === 'number-input',
          command: () => void router.push({ name: 'number-input' }),
        },
        {
          id: 'input-group',
          label: 'Input Group',
          icon: '⊞',
          active: route.name === 'input-group',
          command: () => void router.push({ name: 'input-group' }),
        },
        {
          id: 'text-area',
          label: 'Text Area',
          icon: '¶',
          active: route.name === 'text-area',
          command: () => void router.push({ name: 'text-area' }),
        },
        {
          id: 'password',
          label: 'Password',
          icon: '🔒',
          active: route.name === 'password',
          command: () => void router.push({ name: 'password' }),
        },
        {
          id: 'checkbox',
          label: 'Checkbox',
          icon: '☑',
          active: route.name === 'checkbox',
          command: () => void router.push({ name: 'checkbox' }),
        },
        {
          id: 'radio',
          label: 'Radio',
          icon: '◉',
          active: route.name === 'radio',
          command: () => void router.push({ name: 'radio' }),
        },
        {
          id: 'select',
          label: 'Select',
          icon: '▾',
          active: route.name === 'select',
          command: () => void router.push({ name: 'select' }),
        },
        {
          id: 'multi-select',
          label: 'Multi Select',
          icon: '☷',
          active: route.name === 'multi-select',
          command: () => void router.push({ name: 'multi-select' }),
        },
        {
          id: 'auto-complete',
          label: 'Auto Complete',
          icon: '⌕',
          active: route.name === 'auto-complete',
          command: () => void router.push({ name: 'auto-complete' }),
        },
        { type: 'separator' },
        {
          id: 'icon',
          label: 'Icon',
          icon: '☆',
          active: route.name === 'icon',
          command: () => void router.push({ name: 'icon' }),
        },
        {
          id: 'emoji',
          label: 'Emoji',
          icon: '☺︎',
          active: route.name === 'emoji',
          command: () => void router.push({ name: 'emoji' }),
        },
      ],
    },
  ])
}

export function useComponentNavigation() {
  const route = useRoute()
  const router = useRouter()

  return computed<CMenuEntry[]>(() => [
    {
      id: 'app-bar-menu',
      label: 'AppBar & Menu',
      icon: '☰',
      active: route.name === 'app-bar-menu',
      command: () => void router.push({ name: 'app-bar-menu' }),
    },
    {
      id: 'sidebar',
      label: 'Sidebar',
      icon: '◧',
      active: route.name === 'sidebar',
      command: () => void router.push({ name: 'sidebar' }),
    },
    { type: 'separator' },
    {
      id: 'button',
      label: 'Button',
      icon: '▭',
      active: route.name === 'button',
      command: () => void router.push({ name: 'button' }),
    },
    {
      id: 'form-field',
      label: 'Form Field',
      icon: '▤',
      active: route.name === 'form-field',
      command: () => void router.push({ name: 'form-field' }),
    },
    {
      id: 'input',
      label: 'Input',
      icon: '⌨',
      active: route.name === 'input',
      command: () => void router.push({ name: 'input' }),
    },
    {
      id: 'number-input',
      label: 'Number Input',
      icon: '±',
      active: route.name === 'number-input',
      command: () => void router.push({ name: 'number-input' }),
    },
    {
      id: 'input-group',
      label: 'Input Group',
      icon: '⊞',
      active: route.name === 'input-group',
      command: () => void router.push({ name: 'input-group' }),
    },
    {
      id: 'text-area',
      label: 'Text Area',
      icon: '¶',
      active: route.name === 'text-area',
      command: () => void router.push({ name: 'text-area' }),
    },
    {
      id: 'password',
      label: 'Password',
      icon: '🔒',
      active: route.name === 'password',
      command: () => void router.push({ name: 'password' }),
    },
    {
      id: 'checkbox',
      label: 'Checkbox',
      icon: '☑',
      active: route.name === 'checkbox',
      command: () => void router.push({ name: 'checkbox' }),
    },
    {
      id: 'radio',
      label: 'Radio',
      icon: '◉',
      active: route.name === 'radio',
      command: () => void router.push({ name: 'radio' }),
    },
    {
      id: 'select',
      label: 'Select',
      icon: '▾',
      active: route.name === 'select',
      command: () => void router.push({ name: 'select' }),
    },
    {
      id: 'multi-select',
      label: 'Multi Select',
      icon: '☷',
      active: route.name === 'multi-select',
      command: () => void router.push({ name: 'multi-select' }),
    },
    {
      id: 'auto-complete',
      label: 'Auto Complete',
      icon: '⌕',
      active: route.name === 'auto-complete',
      command: () => void router.push({ name: 'auto-complete' }),
    },
    { type: 'separator' },
    {
      id: 'icon',
      label: 'Icon',
      icon: '☆',
      active: route.name === 'icon',
      command: () => void router.push({ name: 'icon' }),
    },
    {
      id: 'emoji',
      label: 'Emoji',
      icon: '☺︎',
      active: route.name === 'emoji',
      command: () => void router.push({ name: 'emoji' }),
    },
  ])
}