import { renderWithProviders as render, screen, fireEvent } from '../../../test/render';
import { describe, it, expect, vi } from 'vitest';
import { SocialLoginButtons } from './SocialLoginButtons';
import React from 'react';

describe('SocialLoginButtons', () => {
  it('renders nothing when the providers list is empty', () => {
    const { container } = render(<SocialLoginButtons onSocialLogin={vi.fn()} providers={[]} />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders the divider and all default providers', () => {
    render(<SocialLoginButtons onSocialLogin={vi.fn()} />);
    expect(screen.getByText('ou continue com')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /entrar com google/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /entrar com mt login/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /entrar com gov\.br/i })).toBeInTheDocument();
  });

  it('renders only the explicitly requested providers', () => {
    render(<SocialLoginButtons onSocialLogin={vi.fn()} providers={['google']} />);
    expect(screen.getByRole('button', { name: /entrar com google/i })).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /entrar com mt login/i })).not.toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /entrar com gov\.br/i })).not.toBeInTheDocument();
  });

  it('calls onSocialLogin with "Google" when the Google button is clicked', () => {
    const onSocialLogin = vi.fn();
    render(<SocialLoginButtons onSocialLogin={onSocialLogin} />);
    fireEvent.click(screen.getByRole('button', { name: /entrar com google/i }));
    expect(onSocialLogin).toHaveBeenCalledWith('Google');
  });

  it('calls onSocialLogin with "MT Login" when the MT Login button is clicked', () => {
    const onSocialLogin = vi.fn();
    render(<SocialLoginButtons onSocialLogin={onSocialLogin} />);
    fireEvent.click(screen.getByRole('button', { name: /entrar com mt login/i }));
    expect(onSocialLogin).toHaveBeenCalledWith('MT Login');
  });

  it('calls onSocialLogin with "gov.br" when the gov.br button is clicked, keeping "gov.br" bold', () => {
    const onSocialLogin = vi.fn();
    render(<SocialLoginButtons onSocialLogin={onSocialLogin} />);
    const govBrButton = screen.getByRole('button', { name: /entrar com gov\.br/i });
    expect(govBrButton.querySelector('strong')).toHaveTextContent('gov.br');
    fireEvent.click(govBrButton);
    expect(onSocialLogin).toHaveBeenCalledWith('gov.br');
  });
});