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

import Badge from './Badge'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof Badge> = {
  title: 'Components/Badge',
  component: Badge,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-609&p=f&t=NVdjmytDt9Ip5jVT-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-609&p=f&t=NVdjmytDt9Ip5jVT-0'
          description={
            <span>
              The <code>Badge</code> component is a versatile visual element
              used to highlight or categorize information. It provides a
              consistent, styled container with customizable background colors
              that can display text or other React components. Badges are
              compact by design, making them ideal for displaying labels, status
              indicators, counts, or category tags within interfaces.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use <code>Badge</code> to label or categorize content with a
              consistent visual style.
            </span>,
            <span key='second-bullet'>
              Choose from three predefined colors: lavender, dark-green, and
              black to match your design needs.
            </span>,
            <span key='third-bullet'>
              Badges can contain text or other React components to communicate
              status, counts, or categories.
            </span>,
            <span key='fourth-bullet'>
              The compact design takes minimal space while effectively
              highlighting information.
            </span>,
            <span key='fifth-bullet'>
              Implement badges to improve scanability and establish visual
              hierarchy in your interface.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Badge>

export const Lavender: Story = {
  args: {
    color: 'lavender',
    children: 'Badge',
  },
  play: async ({ canvas }) => {
    const badge = canvas.getByTestId('badge')
    await expect(badge).toBeInTheDocument()
    expect(badge.style.getPropertyValue('--badge-background-color')).toBe(
      'var(--lavender)',
    )
  },
}

export const DarkGreen: Story = {
  args: {
    color: 'dark-green',
    children: 'Badge',
  },
  play: async ({ canvas }) => {
    const badge = canvas.getByTestId('badge')
    await expect(badge).toBeInTheDocument()
    expect(badge.style.getPropertyValue('--badge-background-color')).toBe(
      'var(--dark-green)',
    )
  },
}

export const Black: Story = {
  args: {
    color: 'black',
    children: 'Badge',
  },
  play: async ({ canvas }) => {
    const badge = canvas.getByTestId('badge')
    await expect(badge).toBeInTheDocument()
    expect(badge.style.getPropertyValue('--badge-background-color')).toBe(
      'var(--black)',
    )
  },
}