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

import { DocsTemplate } from '../../../.storybook'
import Popover from './Popover'
import Button from '../Button/Button'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof Popover> = {
  title: 'Components/Popover',
  component: Popover,
  argTypes: {
    children: { control: false },
    popoverContent: { control: false },
    onClickOutside: { control: false },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-608&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-608&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>Popover</code> component is a versatile UI element that
              enhances user interactions by providing additional content in a
              popover when a clickable element is activated. This component
              offers a clean and unobtrusive way to present supplementary
              information, options, or actions.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              For more information about the <code>Popover</code> component,
              please see the{' '}
              <a
                href='https://floating-ui.com/docs/react'
                target='_blank'
                rel='noopener noreferrer'
              >
                floating-ui documentation
              </a>
              .
            </span>,
            <span key='second-bullet'>
              Implement the <code>Popover</code> component when you want to
              display additional content, options, or actions related to a
              clickable element.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof Popover>

const Template: Story = {
  render: (args) => <Popover {...args} />,
}

const loremIpsum =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.'

const genericProps = {
  children: ({
    setVisible,
    visible,
  }: {
    setVisible: (visible: boolean) => void
    visible: boolean
  }) => <Button onClick={() => setVisible(!visible)}>Click Me</Button>,
  popoverContent: <div>{loremIpsum}</div>,
  position: 'bottom' as const,
  onClickOutside: () => {
    toast({
      type: 'info',
      message: 'Clicked outside of the Popover',
    })
  },
}
export const Basic: Story = {
  ...Template,
  args: genericProps,
}

export const TopPlacement: Story = {
  ...Template,
  args: { ...genericProps, position: 'top' },
}

export const BottomPlacement: Story = {
  ...Template,
  args: { ...genericProps, position: 'bottom' },
}

export const LeftPlacement: Story = {
  ...Template,
  args: { ...genericProps, position: 'left' },
}

export const RightPlacement: Story = {
  ...Template,
  args: { ...genericProps, position: 'right' },
}

const ScrollingTemplate: Story = {
  render: ({ ...args }) => (
    <div
      style={{ height: 300, width: 200, overflowY: 'scroll' }}
      className='border border-medium-purple p-4'
      id='scrolling-container'
    >
      <div>{loremIpsum}</div>
      <Popover {...args} />
      <div>{loremIpsum}</div>
    </div>
  ),
}

export const CloseWhenScrolling: Story = {
  ...ScrollingTemplate,
  args: {
    ...genericProps,
  },
}

export const CloseWhenScrollingDisabled: Story = {
  ...ScrollingTemplate,
  args: {
    ...genericProps,
    disableCloseOnScroll: true,
  },
}

export const CloseFromPopoverContent: Story = {
  ...Template,
  args: {
    ...genericProps,
    popoverContent: ({ setVisible }) => (
      <div>
        <div>{loremIpsum}</div>
        <Button onClick={() => setVisible(false)}>Close Popover</Button>
      </div>
    ),
  },
}

export const WithHeader: Story = {
  ...Template,
  args: {
    ...genericProps,
    header: { headerText: 'Header Text' },
    noPadding: false,
  },
}

export const NoPadding: Story = {
  ...Template,
  args: {
    ...genericProps,
    noPadding: true,
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    ...genericProps,
    disabled: true,
    position: 'bottom',
  },
}

export const AutoPosition: Story = {
  ...Template,
  args: {
    ...genericProps,
    position: 'auto',
  },
}