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

import DropdownMenu, {
  type DropdownAction,
  type NoSubMenuAction,
} from './DropdownMenu'
import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import { type IconStringList } from '../Icons/Icon.models'
import { type TooltipProps } from '../Tooltip/Tooltip'
import { toast } from '../Toast/Toast'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof DropdownMenu> = {
  title: 'Components/DropdownMenu',
  component: DropdownMenu,
  argTypes: {
    trigger: { control: false },
    actions: { control: false },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=4063-4220&p=f&t=9R4mlUY42yEaNlLp-0',
    },
    docs: {
      page: () => (
        <DocsTemplate figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=4063-4220&p=f&t=9R4mlUY42yEaNlLp-0' />
      ),
    },
    layout: 'centered',
  },
  args: {
    trigger: (
      <div>
        <Button>Open Menu</Button>
      </div>
    ),
  },
}

export default meta

type Story = StoryObj<typeof meta>

const genericPlaceholderIcon = 'link' as IconStringList

const baseActions: DropdownAction[] = [
  {
    text: 'Download',
    icon: 'download' as IconStringList,
    callout: () => toast({ message: 'Download clicked', type: 'info' }),
  },
  {
    text: 'Publish to Channel',
    icon: 'upload' as IconStringList,
    callout: () => toast({ message: 'Publish clicked', type: 'info' }),
  },
  {
    text: 'Export As',
    icon: genericPlaceholderIcon,
    subMenu: [
      {
        text: 'Image',
        icon: genericPlaceholderIcon,
        callout: () => toast({ message: 'Export as Image', type: 'info' }),
      },
      {
        text: 'PDF',
        icon: genericPlaceholderIcon,
        callout: () => toast({ message: 'Export as PDF', type: 'info' }),
      },
      {
        text: 'Spreadsheet (.xlsx)',
        icon: genericPlaceholderIcon,
        callout: () => toast({ message: 'Export as .xlsx', type: 'info' }),
      },
      {
        text: 'Spreadsheet (.csv)',
        icon: genericPlaceholderIcon,
        callout: () => toast({ message: 'Export as .csv', type: 'info' }),
      },
    ] as NoSubMenuAction[],
  },
  {
    text: 'Delete',
    icon: 'trash' as IconStringList,
    destructive: true,
    callout: () => toast({ message: 'Delete clicked', type: 'error' }),
  },
  {
    text: 'Disabled Action',
    icon: 'ban' as IconStringList,
    disabled: {
      value: true,
      tooltip: { content: 'This action is disabled' } as Omit<
        TooltipProps,
        'children'
      >,
    },
    callout: () => toast({ message: 'Should not fire', type: 'warning' }),
  },
]

export const Default: Story = {
  args: {
    actions: baseActions,
  },
}

export const WithConfirmationAction: Story = {
  args: {
    actions: [
      {
        text: 'Delete with Confirmation',
        icon: 'trash',
        destructive: true,
        confirmation: {
          type: 'red',
          header: 'Are you sure?',
          body: 'This will perform some action. Would you like to continue?',
          confirmCallout: () => {
            toast({ message: 'You clicked confirm!', type: 'success' })
          },
        },
      },
      ...baseActions.filter((action) => action.text !== 'Delete'),
    ],
  },
}

export const WithLinkAction: Story = {
  args: {
    actions: [
      {
        text: 'Go to Storybook',
        icon: 'launch' as IconStringList,
        link: 'https://storybook.js.org/',
        routerComponent: 'a',
        routerProp: 'href',
        callout: () => toast({ message: 'Link clicked', type: 'info' }),
      },
      ...baseActions,
    ],
  },
}
// With Toggle Actions
const WithToggle = () => {
  const [toggleState, setToggleState] = useState(true)

  const actions = [
    {
      text: 'View Details',
      icon: 'eye' as const,
      callout: () => toast({ type: 'success', message: 'Viewing details' }),
    },
    {
      text: 'Edit Item',
      icon: 'pencil' as const,
      callout: () => toast({ type: 'success', message: 'Editing item' }),
    },
    {
      text: 'Enable Feature',
      icon: 'toggle' as const,
      toggle: {
        checked: toggleState,
        callout: (value) => {
          setToggleState(value)
          toast({
            type: 'success',
            message: `Feature ${value ? 'enabled' : 'disabled'}`,
          })
        },
      },
    },
  ]

  return <DropdownMenu actions={actions} trigger={<Button>Open Menu</Button>} />
}

export const WithToggleAction: Story = {
  render: () => <WithToggle />,
}

export const WithSecondaryContent: Story = {
  args: {
    actions: [
      {
        text: 'Action with Info',
        icon: genericPlaceholderIcon,
        secondaryContent: <Icon icon='info' iconSize='16px' />,
        callout: () =>
          toast({ message: 'Action with info clicked', type: 'info' }),
      },
      ...baseActions,
    ],
  },
}