import type { Meta, StoryObj } from '@storybook/react-vite'

import { ComboboxDemo } from './combobox'
import { useState } from 'react'
import { Button } from '@components/ui/button/button'
import {
  CommandPalette,
  CommandPaletteEmpty,
  CommandPaletteGroup,
  CommandPaletteInput,
  CommandPaletteItem,
  CommandPaletteList,
} from '@components/ui/command-palette/command-palette'
import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from 'components/ui/dropdown-menu/dropdown-menu'
import { DotsHorizontalIcon } from '@radix-ui/react-icons'

// DATA ------------------------------------------------------------------------

const labels = ['feature', 'bug', 'enhancement', 'documentation', 'design', 'question', 'maintenance']

type Status = {
  value: string
  label: string
}

const statuses: Status[] = [
  {
    value: 'backlog',
    label: 'Backlog',
  },
  {
    value: 'todo',
    label: 'Todo',
  },
  {
    value: 'in progress',
    label: 'In Progress',
  },
  {
    value: 'done',
    label: 'Done',
  },
  {
    value: 'canceled',
    label: 'Canceled',
  },
]

const meta = {
  title: 'Combobox',
  component: ComboboxDemo,
  tags: ['autodocs'],
} satisfies Meta<typeof ComboboxDemo>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A basic combobox component with search and selection functionality.',
      },
    },
  },
  render: () => (
    <div className="flex items-center justify-center">
      <ComboboxDemo />
    </div>
  ),
}

const PopoverComboboxExample = () => {
  const [openPopover, setOpenPopover] = useState(false)
  const [selectedStatus, setSelectedStatus] = useState<Status | null>(null)

  return (
    <div className="flex items-center space-x-4">
      <p className="text-sm text-muted-foreground">Status</p>
      <Popover open={openPopover} onOpenChange={setOpenPopover}>
        <PopoverTrigger asChild>
          <Button variant="outline" className="w-[150px] justify-start">
            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="p-0" side="right" align="start">
          <CommandPalette>
            <CommandPaletteInput placeholder="Change status..." />
            <CommandPaletteList>
              <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
              <CommandPaletteGroup>
                {statuses.map((status) => (
                  <CommandPaletteItem
                    key={status.value}
                    value={status.value}
                    onSelect={(value) => {
                      setSelectedStatus(statuses.find((priority) => priority.value === value) || null)
                      setOpenPopover(false)
                    }}
                  >
                    {status.label}
                  </CommandPaletteItem>
                ))}
              </CommandPaletteGroup>
            </CommandPaletteList>
          </CommandPalette>
        </PopoverContent>
      </Popover>
    </div>
  )
}

export const WithPopover: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A combobox implemented using a popover with status selection functionality.',
      },
    },
  },
  render: () => <PopoverComboboxExample />,
}

const DropdownMenuComboboxExample = () => {
  const [label, setLabel] = useState('feature')
  const [openDropdown, setOpenDropdown] = useState(false)

  return (
    <div className="flex items-center justify-center">
      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
        <p className="text-sm font-medium leading-none">
          <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">{label}</span>
          <span className="text-muted-foreground">Create a new project</span>
        </p>
        <DropdownMenu open={openDropdown} onOpenChange={setOpenDropdown}>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm">
              <DotsHorizontalIcon />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[200px]">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuGroup>
              <DropdownMenuItem>Assign to...</DropdownMenuItem>
              <DropdownMenuItem>Set due date...</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
                <DropdownMenuSubContent className="p-0">
                  <CommandPalette>
                    <CommandPaletteInput placeholder="Filter label..." autoFocus={true} className="h-9" />
                    <CommandPaletteList>
                      <CommandPaletteEmpty>No label found.</CommandPaletteEmpty>
                      <DropdownMenuGroup>
                        {labels.map((label) => (
                          <CommandPaletteItem
                            key={label}
                            value={label}
                            onSelect={(value) => {
                              setLabel(value)
                              setOpenDropdown(false)
                            }}
                          >
                            {label}
                          </CommandPaletteItem>
                        ))}
                      </DropdownMenuGroup>
                    </CommandPaletteList>
                  </CommandPalette>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-red-600">
                Delete
                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}

export const WithDropdownMenu: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A combobox integrated within a dropdown menu for label selection with project management actions.',
      },
    },
  },
  render: () => <DropdownMenuComboboxExample />,
}
