import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Menu, type MenuItemChildrenType } from './Menu'

const meta = {
  title: 'Components/Menu',
  component: Menu,
  args: {
    items: [],
    currentPath: '',
    onSelectionChange: () => {},
  },
} satisfies Meta<typeof Menu>

export default meta
type Story = StoryObj<typeof meta>

const sampleItems = [
  {
    id: '1',
    name: '항공영상 관리',
    menuUrl: null,
    children: [
      { id: '1-1', name: '항공영상 목록', menuUrl: '/imagery/list' },
      { id: '1-2', name: '항공영상 등록', menuUrl: '/imagery/register' },
    ],
  },
  {
    id: '2',
    name: '탐지 관리',
    menuUrl: null,
    children: [
      { id: '2-1', name: '탐지 실행', menuUrl: '/detection/run' },
      { id: '2-2', name: '탐지 결과', menuUrl: '/detection/result' },
      { id: '2-3', name: '탐지 이력', menuUrl: '/detection/history' },
    ],
  },
  {
    id: '3',
    name: '설정',
    menuUrl: null,
    children: [
      { id: '3-1', name: '시스템 설정', menuUrl: '/settings/system' },
      { id: '3-2', name: '사용자 설정', menuUrl: '/settings/user' },
    ],
  },
]

export const Default: Story = {
  render: function Render() {
    const [currentPath, setCurrentPath] = useState('/imagery/list')
    const handleSelectionChange = (menu: MenuItemChildrenType) => {
      setCurrentPath(menu.menuUrl)
    }
    return (
      <div className="w-60 bg-dabeeo-gray-f5">
        <Menu items={sampleItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
      </div>
    )
  },
}

export const WithDifferentPath: Story = {
  render: function Render() {
    const [currentPath, setCurrentPath] = useState('/detection/result')
    const handleSelectionChange = (menu: MenuItemChildrenType) => {
      setCurrentPath(menu.menuUrl)
    }
    return (
      <div className="w-60 bg-dabeeo-gray-f5">
        <Menu items={sampleItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
      </div>
    )
  },
}

export const SingleCategory: Story = {
  render: function Render() {
    const singleCategoryItems = [
      {
        id: '1',
        name: '항공영상 관리',
        menuUrl: null,
        children: [
          { id: '1-1', name: '항공영상 목록', menuUrl: '/imagery/list' },
          { id: '1-2', name: '항공영상 등록', menuUrl: '/imagery/register' },
          { id: '1-3', name: '항공영상 상세', menuUrl: '/imagery/detail' },
        ],
      },
    ]
    const [currentPath, setCurrentPath] = useState('/imagery/list')
    const handleSelectionChange = (menu: MenuItemChildrenType) => {
      setCurrentPath(menu.menuUrl)
    }
    return (
      <div className="w-60 bg-dabeeo-gray-f5">
        <Menu items={singleCategoryItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
      </div>
    )
  },
}