import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, expect, test } from 'vitest';
import UiSwitch from '../UiSwitch.vue';

describe('UiSwitch', () => {
  test('renders with role="switch" and defaults to unchecked', () => {
    const { getByRole } = render(UiSwitch);
    const switchEl = getByRole('switch');
    expect(switchEl).toBeInTheDocument();
    expect(switchEl).toHaveAttribute('aria-checked', 'false');
  });

  test('renders with initial checked state', () => {
    const { container, getByRole } = render(UiSwitch, {
      props: { modelValue: true },
    });
    const switchEl = getByRole('switch');
    const thumb = container.querySelector('[data-slot="switch-thumb"]');

    expect(switchEl).toHaveAttribute('aria-checked', 'true');
    expect(switchEl).toHaveClass(
      'data-[state=checked]:bg-background-accent-default',
    );
    expect(thumb).toHaveClass('data-[state=checked]:bg-background-accent-soft');
  });

  test('emits update:modelValue true when toggled from off', async () => {
    const { getByRole, emitted } = render(UiSwitch);

    await userEvent.click(getByRole('switch'));
    expect(emitted('update:modelValue')).toHaveLength(1);
    expect(emitted('update:modelValue')[0][0]).toBe(true);
  });

  test('emits update:modelValue false when toggled from on', async () => {
    const { getByRole, emitted } = render(UiSwitch, {
      props: { modelValue: true },
    });

    await userEvent.click(getByRole('switch'));
    expect(emitted('update:modelValue')).toHaveLength(1);
    expect(emitted('update:modelValue')[0][0]).toBe(false);
  });

  test('does not toggle when disabled', async () => {
    const { getByRole, emitted } = render(UiSwitch, {
      props: { disabled: true },
    });

    await userEvent.click(getByRole('switch'));
    expect(emitted('update:modelValue')).toBeUndefined();
  });
});
