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

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

const meta = {
  title: 'Components/Toast',
  component: PatternToastContainer,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-353&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-353&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>Toast</code> component provides non-intrusive feedback
              and notifications to users. It appears temporarily and can be
              configured with different styles, behaviors, and interactive
              elements. Toasts are perfect for displaying success messages,
              errors, warnings, or general information without interrupting the
              user's workflow.
            </span>
          }
          infoBullets={[
            'Supports four notification types: success, error, warning, and info',
            'Can display text, HTML content, or React components as messages',
            'Optional interactive buttons (up to 2) for user actions',
            'Configurable auto-dismiss behavior (errors persist by default)',
            'Customizable duration and animation settings',
            'Supports queuing multiple notifications',
            'Can be manually dismissed',
          ]}
        />
      ),
    },
  },
} satisfies Meta<typeof PatternToastContainer>

export default meta

type Story = StoryObj<typeof PatternToastContainer>

// Basic Toast Examples
export const BasicSuccess: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({ type: 'success', message: 'Operation completed successfully!' })
      }
    >
      Show Success Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: "toast({ type: 'success', message: 'Operation completed successfully!' })",
      },
    },
  },
}

export const BasicError: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'error',
          message: 'An error occurred. Please try again.',
        })
      }
    >
      Show Error Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: "toast({ type: 'error', message: 'An error occurred. Please try again.' })",
      },
    },
  },
}

export const BasicWarning: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'warning',
          message: 'Please review your changes before continuing.',
        })
      }
    >
      Show Warning Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: "toast({ type: 'warning', message: 'Please review your changes before continuing.' })",
      },
    },
  },
}

export const BasicInfo: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({ type: 'info', message: 'New features are available!' })
      }
    >
      Show Info Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: "toast({ type: 'info', message: 'New features are available!' })",
      },
    },
  },
}

// Long Text Content Example
export const LongTextContent: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'info',
          message:
            'This toast contains significantly more text content to demonstrate how the toast width dynamically adjusts based on the content. The width will expand to fit the text up to a maximum width of 520px, after which it will wrap to additional lines.',
        })
      }
    >
      Show Long Text Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: "toast({ type: 'info', message: 'This toast contains significantly more text content to demonstrate how the toast width dynamically adjusts based on the content. The width will expand to fit the text up to a maximum width of 520px, after which it will wrap to additional lines.' })",
      },
    },
  },
}

// Rich Content Example
export const RichContent: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'info',
          message: (
            <div>
              <strong>Update Available</strong>
              <p>Version 2.0 is now available with new features:</p>
              <ul>
                <li>Enhanced performance</li>
                <li>New UI components</li>
                <li>Bug fixes</li>
              </ul>
            </div>
          ),
        })
      }
    >
      Show Rich Content Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: `toast({
  type: 'info',
  message: (
    <div>
      <strong>Update Available</strong>
      <p>Version 2.0 is now available with new features:</p>
      <ul>
        <li>Enhanced performance</li>
        <li>New UI components</li>
        <li>Bug fixes</li>
      </ul>
    </div>
  ),
})`,
      },
    },
  },
}

// Interactive Toast Examples
export const WithButtons: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'warning',
          message: 'You have unsaved changes.',
          buttons: [
            {
              children: 'Save',
              onClick: () =>
                toast({ message: 'Changes saved!', type: 'success' }),
            },
            {
              children: 'Discard',
              onClick: () =>
                toast({ message: 'Changes discarded', type: 'info' }),
            },
          ],
        })
      }
    >
      Show Interactive Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: `toast({
  type: 'warning',
  message: 'You have unsaved changes.',
  buttons: [
    {
      children: 'Save',
      onClick: () => toast({ message: 'Changes saved!', type: 'success' }),
    },
    {
      children: 'Discard',
      onClick: () => toast({ message: 'Changes discarded', type: 'info' }),
    },
  ],
})`,
      },
    },
  },
}

// Custom Configuration Example
export const CustomConfig: Story = {
  render: () => (
    <Button
      onClick={() =>
        toast({
          type: 'info',
          message: 'This toast will stay for 10 seconds',
          config: {
            autoClose: 10000,
            position: 'bottom-right',
          },
        })
      }
    >
      Show Configured Toast
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: `toast({
  type: 'info',
  message: 'This toast will stay for 10 seconds',
  config: {
    autoClose: 10000,
    position: 'bottom-right',
  },
})`,
      },
    },
  },
}

// Multiple Toasts Example
export const MultipleToasts: Story = {
  render: () => (
    <Button
      onClick={() => {
        toast({
          type: 'info',
          message: 'Processing your request...',
        })
        setTimeout(() => {
          toast({
            type: 'success',
            message: 'First task completed',
          })
        }, 1000)
        setTimeout(() => {
          toast({
            type: 'success',
            message: 'Second task completed',
          })
        }, 2000)
        setTimeout(() => {
          toast({
            type: 'success',
            message: 'All tasks completed successfully!',
          })
        }, 3000)
      }}
    >
      Show Multiple Toasts
    </Button>
  ),
  parameters: {
    docs: {
      source: {
        code: `// Showing multiple toasts in sequence
toast({
  type: 'info',
  message: 'Processing your request...',
})

setTimeout(() => {
  toast({
    type: 'success',
    message: 'First task completed',
  })
}, 1000)

setTimeout(() => {
  toast({
    type: 'success',
    message: 'Second task completed',
  })
}, 2000)

setTimeout(() => {
  toast({
    type: 'success',
    message: 'All tasks completed successfully!',
  })
}, 3000)`,
      },
    },
  },
}