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

describe('UiChip', () => {
  test('renders static chip content', () => {
    const { getByText } = render(UiChip, {
      props: { variant: 'static' },
      slots: { default: 'Data Analysis' },
    });

    expect(getByText('Data Analysis')).toBeInTheDocument();
  });

  test('renders start icon when provided', () => {
    const { getByTestId } = render(UiChip, {
      props: {
        variant: 'static',
        startIcon: MockIcon,
      },
      slots: { default: 'Chip' },
    });

    expect(getByTestId('mock-icon')).toBeInTheDocument();
  });

  test('toggles selected state for selectable chips', async () => {
    const user = userEvent.setup();
    const { getByRole } = render(UiChip, {
      props: { variant: 'selectable' },
      slots: { default: 'Selectable chip' },
    });

    const chipButton = getByRole('button');

    expect(chipButton).toHaveAttribute('aria-pressed', 'false');
    await user.click(chipButton);
    expect(chipButton).toHaveAttribute('aria-pressed', 'true');
  });

  test('renders remove button for removable chips', () => {
    const { getByRole } = render(UiChip, {
      props: { variant: 'removable' },
      slots: { default: 'Removable chip' },
    });

    expect(getByRole('button', { name: 'Removable chip' })).toBeInTheDocument();
    expect(getByRole('button', { name: 'Remove chip' })).toBeInTheDocument();
  });

  test('tabs focus from chip body to remove button for removable chips', async () => {
    const user = userEvent.setup();
    const { getByRole } = render(UiChip, {
      props: { variant: 'removable' },
      slots: { default: 'Removable chip' },
    });

    const chipBodyButton = getByRole('button', { name: 'Removable chip' });
    const removeButton = getByRole('button', { name: 'Remove chip' });

    await user.tab();
    expect(chipBodyButton).toHaveFocus();

    await user.tab();
    expect(removeButton).toHaveFocus();
  });

  test('emits remove when remove button is clicked', async () => {
    const user = userEvent.setup();
    const { getByRole, emitted } = render(UiChip, {
      props: { variant: 'removable' },
      slots: { default: 'Removable chip' },
    });

    await user.click(getByRole('button', { name: 'Remove chip' }));

    expect(emitted('remove')).toHaveLength(1);
  });

  test('disables interactions when disabled', async () => {
    const user = userEvent.setup();
    const { getByRole, emitted } = render(UiChip, {
      props: {
        variant: 'removable',
        selectable: true,
        disabled: true,
      },
      slots: { default: 'Disabled chip' },
    });

    const selectableButton = getByRole('button', { name: 'Disabled chip' });
    const removeButton = getByRole('button', { name: 'Remove chip' });

    expect(selectableButton).toBeDisabled();
    expect(removeButton).toBeDisabled();

    await user.click(removeButton);
    expect(emitted('remove')).toBeUndefined();
  });
});
