import { render, screen, userEvent } from '../../../test-utils';
import PrimitiveAnchor from '..';

describe('PrimitiveAnchor', () => {
  const defaultProps = {
    children: 'Click me',
    href: '#destination',
  };

  const renderAnchor = (props?: Partial<typeof defaultProps>) => {
    return render(<PrimitiveAnchor {...defaultProps} {...props} />);
  };

  it('renders an anchor by default', () => {
    renderAnchor();
    expect(screen.getByRole('link')).toBeInTheDocument();
    expect(screen.getByRole('link')).toHaveTextContent('Click me');
    expect(screen.getByRole('link')).toHaveAttribute('href', defaultProps.href);
  });

  it('applies the correct classes based on props', () => {
    const props = {
      ...defaultProps,
      className: 'custom-class',
    };

    renderAnchor(props);

    const link = screen.getByRole('link');
    expect(link).toHaveClass('custom-class');
  });

  it('disables the anchor when isDisabled is true', () => {
    const props = {
      ...defaultProps,
      disabled: true,
    };

    renderAnchor(props);

    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('aria-disabled', 'true');
    expect(link).not.toHaveAttribute('href', defaultProps.href);
  });

  it('sets data-testid attribute', () => {
    const props = {
      ...defaultProps,
      testId: 'custom-id',
    };

    renderAnchor(props);

    const link = screen.getByTestId('custom-id');
    expect(link).toBeInTheDocument();
  });

  it('sets the target attribute to _blank', () => {
    const props = {
      ...defaultProps,
      target: '_blank',
    };

    renderAnchor(props);

    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('target', '_blank');
  });

  it('sets the rel attribute to noopener noreferrer', () => {
    const props = {
      ...defaultProps,
      rel: 'noopener noreferrer',
    };

    renderAnchor(props);

    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
  });

  it('applies custom styles', () => {
    const props = {
      ...defaultProps,
      style: { color: 'red' },
    };

    renderAnchor(props);

    const link = screen.getByRole('link');
    expect(link).toHaveStyle('color: red');
  });

  it('should respect click handlers', async () => {
    const props = {
      ...defaultProps,
      onClick: jest.fn(),
    };

    renderAnchor(props);
    await userEvent.click(screen.getByRole('link'));
    expect(props.onClick).toHaveBeenCalledTimes(1);
  });
});