import { screen } from '@testing-library/react';
import { render } from '../../../test-utils';
import PrimitiveButton from '..';
import allMessages from '../../../i18n';

describe('Button', () => {
  const defaultProps = {
    children: 'Click me',
  };

  const renderButton = (
    props?: Partial<typeof defaultProps>,
    locale = 'en',
    localeMessages = allMessages.en,
  ) => {
    return render(
      <PrimitiveButton {...defaultProps} {...props} />,
      // @ts-expect-error: props be missing properties from type
      { locale, messages: localeMessages },
    );
  };

  it('renders a button by default', () => {
    renderButton();
    expect(screen.getByRole('button')).toBeInTheDocument();
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });

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

    renderButton(props);

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

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

    renderButton(props);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  it('disables and announces the button as busy in loading mode', () => {
    const props = {
      ...defaultProps,
      loading: true,
    };

    renderButton(props);

    expect(screen.getByRole('button', { busy: true })).toHaveAttribute('aria-disabled', 'true');
  });

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

    renderButton(props);

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

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

    renderButton(props);

    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('type', 'submit');
  });

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

    renderButton(props);

    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('type', 'reset');
  });

  it('sets the type attribute to button by default', () => {
    renderButton();
    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('type', 'button');
  });

  it('displays the aria-label in Spanish when loading', () => {
    const props = {
      ...defaultProps,
      loading: true,
    };

    renderButton(props, 'es', allMessages.es);

    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('aria-label', 'cargando');
  });
});