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

import Tag, { tagColorList } from './Tag'
import { DocsTemplate } from '../../../.storybook'
import { replaceSymbol } from '../../services/HelperService'

const meta: Meta<typeof Tag> = {
  title: 'Components/Tag',
  component: Tag,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-334&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-334&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>Tag</code> component is a small, colorful box designed
              to display concise text and represent various status indicators,
              labels, or categories. It serves as a visual label that helps
              users quickly identify and categorize different elements within
              the interface. <code>Tag</code>s are commonly used to add context
              and improve the organization of information.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Keep the text inside the <code>Tag</code> brief but descriptive,
              conveying relevant information at a glance.
            </span>,
            <span key='second-bullet'>
              Ensure the <code>Tag</code> component remains consistent in color
              usage across an application to maintain visual harmony and a
              polished user experience.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Tag>

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

export const Single: Story = {
  ...Template,
  args: {
    children: 'Blue',
    color: 'blue',
  },
}

const AllTemplate: Story = {
  render: () => {
    return (
      <div className='flex flex-wrap items-center gap-4'>
        {tagColorList.map((tagColor) => (
          <Tag color={tagColor} key={tagColor}>
            {replaceSymbol(tagColor, ' ', '-')}
          </Tag>
        ))}
      </div>
    )
  },
}

export const AllVariations: Story = {
  ...AllTemplate,
  args: {},
}