import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiToggle from '../UiToggle.vue';

describe('UiToggle', () => {
  test('renders toggle button', () => {
    const { getByRole } = render(UiToggle, {
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toBeInTheDocument();
  });

  test('has data-slot attribute', () => {
    const { container } = render(UiToggle, {
      slots: { default: 'Toggle' },
    });
    const toggle = container.querySelector('[data-slot="toggle"]');
    expect(toggle).toBeInTheDocument();
  });

  test('starts in off state by default', () => {
    const { getByRole } = render(UiToggle, {
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toHaveAttribute('data-state', 'off');
  });

  test('uses active prop as controlled visual state', () => {
    const { getByRole } = render(UiToggle, {
      props: { active: true },
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toHaveAttribute('data-state', 'on');
  });

  test('uses muted-subtle hover fill', () => {
    const { getByRole } = render(UiToggle, {
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toHaveClass(
      'hover:bg-background-surface-muted-subtle',
    );
  });

  test('uses outlined button border by default', () => {
    const { getByRole } = render(UiToggle, {
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toHaveClass(
      'border',
      'border-border-button-outlined',
    );
  });

  test('is disabled when disabled prop is true', () => {
    const { getByRole } = render(UiToggle, {
      props: { disabled: true },
      slots: { default: 'Toggle' },
    });
    expect(getByRole('button')).toBeDisabled();
  });

  test('applies outline variant classes', () => {
    const { container } = render(UiToggle, {
      props: { variant: 'outline' },
      slots: { default: 'Toggle' },
    });
    const toggle = container.querySelector('button');
    expect(toggle).toHaveClass('border');
  });

  test('applies soft variant classes', () => {
    const { container } = render(UiToggle, {
      props: { variant: 'soft' },
      slots: { default: 'Toggle' },
    });
    const toggle = container.querySelector('button');
    expect(toggle).toHaveClass('bg-transparent');
    expect(toggle).toHaveClass('border-border-button-outlined');
    expect(toggle).toHaveClass('data-[state=on]:bg-background-accent-soft');
    expect(toggle).toHaveClass('data-[state=on]:text-content-on-accent-soft');
    expect(toggle).toHaveClass('data-[state=on]:border-accent-default');
    expect(toggle).toHaveClass('data-[state=open]:bg-background-accent-soft');
    expect(toggle).toHaveClass('data-[state=open]:text-content-on-accent-soft');
    expect(toggle).toHaveClass('data-[state=open]:border-accent-default');
    expect(toggle).toHaveClass('aria-pressed:bg-background-accent-soft');
    expect(toggle).toHaveClass('aria-pressed:text-content-on-accent-soft');
    expect(toggle).toHaveClass('aria-pressed:border-accent-default');
  });

  test('applies sm size classes', () => {
    const { container } = render(UiToggle, {
      props: { size: 'sm' },
      slots: { default: 'Toggle' },
    });
    const toggle = container.querySelector('button');
    expect(toggle).toHaveClass('h-8');
  });

  test('applies lg size classes', () => {
    const { container } = render(UiToggle, {
      props: { size: 'lg' },
      slots: { default: 'Toggle' },
    });
    const toggle = container.querySelector('button');
    expect(toggle).toHaveClass('h-10');
  });

  test('renders left and right icons', () => {
    const { container } = render(UiToggle, {
      props: { leftIcon: 'columns3', rightIcon: 'chevron-down' },
      slots: { default: 'Toggle' },
    });
    expect(container.querySelectorAll('[data-slot="icon"]')).toHaveLength(2);
  });
});
