import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import { createMockIcon } from '@/__tests__/test-utils';
import UiBadge from '../UiBadge.vue';

describe('UiBadge', () => {
  describe('Variants', () => {
    test.each([
      ['default', 'bg-background-button-primary-button'],
      ['secondary', 'bg-background-button-secondary-button'],
      ['outline', 'bg-background-surface-primary'],
      ['destructive', 'bg-background-button-danger-button'],
      ['success', 'bg-background-status-success'],
      ['warning', 'bg-background-status-warning'],
      ['verified', 'bg-background-accent-default'],
    ])('renders the %s variant', (variant, expectedClass) => {
      const { container } = render(UiBadge, {
        props: { variant },
        slots: { default: variant },
      });

      expect(container.firstElementChild).toHaveClass(expectedClass);
    });
  });

  describe('Icons', () => {
    test('renders start icon', () => {
      const iconTestId = 'start-icon';

      const { getByTestId } = render(UiBadge, {
        props: {
          startIcon: createMockIcon(iconTestId),
        },
        slots: { default: 'Badge' },
      });

      expect(getByTestId(iconTestId)).toBeInTheDocument();
    });

    test('renders end icon', () => {
      const iconTestId = 'end-icon';

      const { getByTestId } = render(UiBadge, {
        props: {
          endIcon: createMockIcon(iconTestId),
        },
        slots: { default: 'Badge' },
      });

      expect(getByTestId(iconTestId)).toBeInTheDocument();
    });

    test('does not forward icon props as DOM attributes', () => {
      const { container } = render(UiBadge, {
        props: {
          startIcon: createMockIcon('start-icon'),
          endIcon: createMockIcon('end-icon'),
        },
        slots: { default: 'Badge' },
      });

      expect(container.firstElementChild).not.toHaveAttribute('starticon');
      expect(container.firstElementChild).not.toHaveAttribute('endicon');
    });
  });

  describe('Disabled', () => {
    test('marks the badge as aria-disabled', () => {
      const { getByText } = render(UiBadge, {
        props: { disabled: true },
        slots: { default: 'Disabled badge' },
      });

      expect(getByText('Disabled badge')).toHaveAttribute(
        'aria-disabled',
        'true',
      );
    });

    test('does not render a hover overlay when disabled', () => {
      const { container } = render(UiBadge, {
        props: { disabled: true },
        slots: { default: 'Disabled badge' },
      });

      expect(
        container.querySelector('.v-hover-overlay'),
      ).not.toBeInTheDocument();
    });
  });
});
