import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import Tag, { TagShape, TagVariant, tagColorCssVariables } from './Tag';
import * as stories from './Tag.stories';

const composedStories = composeStories(stories);

describe('Tag', () => {
  describe('Storybook', () => {
    Object.entries(composedStories).forEach(([name, Story]) => {
      it(`renders ${name} story`, () => {
        const { container } = render(<Story />);
        expect(container).toMatchSnapshot();
      });
    });
  });

  describe('shape/variant', () => {
    Object.entries(TagShape).forEach(([shapeKey, shape]) => {
      Object.entries(TagVariant).forEach(([variantKey, variant]) => {
        const key = `${shapeKey}:${variantKey}`;
        it(`renders ${key} as expected`, () => {
          const { asFragment } = render(
            <Tag shape={shape} variant={variant}>
              {key}
            </Tag>
          );
          expect(asFragment()).toMatchSnapshot();
        });
      });
    });
  });

  it('accepts a custom className', () => {
    const { asFragment } = render(
      <Tag className='absolute block bg-accent-red px-10' />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('accepts a custom element via `props.as`', () => {
    const { asFragment } = render(
      <Tag as='a' href='https://suno.com'>
        Made with Suno
      </Tag>
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

describe('tagColorCssVariables', () => {
  it('returns the correct CSS variables', () => {
    const cssVariables = tagColorCssVariables({
      background: 'red',
      foreground: 'blue',
      border: 'green',
    });
    expect(cssVariables).toEqual({
      '--background-tag': 'red',
      '--foreground-tag': 'blue',
      '--border-tag': 'green',
    });
  });

  it('returns the expected fallback CSS variables', () => {
    const cssVariables = tagColorCssVariables({});
    expect(cssVariables).toEqual({
      '--background-tag': 'transparent',
      '--foreground-tag': 'currentColor',
      '--border-tag': 'currentColor',
    });
  });
});