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

import { DocsTemplate } from '../../../.storybook'
import ConfirmationPopoverContent from './ConfirmationPopoverContent'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof ConfirmationPopoverContent> = {
  title: 'Components/Popover/ConfirmationPopoverContent',
  component: ConfirmationPopoverContent,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-337&t=KUWdug3XS3dQ8hnl-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-337&t=KUWdug3XS3dQ8hnl-0'
          description={
            <span>
              The ConfirmationPopoverContent component is designed to display
              confirmation content within a popover. It includes a structured
              layout consisting of a header, body, and footer buttons, ensuring
              a consistent user experience for actions that require
              confirmation. The component also offers different color variations
              to visually distinguish between types of confirmations, such as
              warnings or approvals.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the ConfirmationPopoverContent component to present
              confirmation prompts within a popover, ensuring users can confirm
              or cancel actions before proceeding.
            </span>,
            <span key='second-bullet'>
              Implement footer buttons for the user to confirm or cancel the
              action. Typically, one button is styled as a primary action (e.g.,
              “Confirm”), while the other is a secondary action (e.g.,
              “Cancel”).
            </span>,
            <span key='third-bullet'>
              Leverage the different color variations to visually distinguish
              the type of confirmation (e.g., red for destructive actions, green
              for approvals), aligning with the application’s design system.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof ConfirmationPopoverContent>

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

export const Green: Story = {
  ...Template,
  args: {
    type: 'green',
    header: 'Are you sure?',
    body: (
      <span>This will perform some action. Would you like to continue?</span>
    ),
    confirmCallout: () => {
      toast({ message: 'You clicked confirm!', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel!', type: 'info' })
    },
  },
}

export const Blue: Story = {
  ...Template,
  args: {
    type: 'blue',
    header: 'Are you sure?',
    body: 'This will perform some action. Would you like to continue?',
    confirmCallout: () => {
      toast({ message: 'You clicked confirm!', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel!', type: 'info' })
    },
  },
}

export const Red: Story = {
  ...Template,
  args: {
    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' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel!', type: 'info' })
    },
  },
}

export const CustomConfirmButtonText: Story = {
  ...Template,
  args: {
    type: 'green',
    header: 'Are you sure?',
    body: 'This will perform some action. Would you like to continue?',
    confirmCallout: () => {
      toast({ message: 'You clicked confirm!', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel!', type: 'info' })
    },
    confirmButtonText: 'Yessir',
  },
}