import React from 'react';
import { render, screen } from '@testing-library/react';
import { jest } from '@jest/globals';
import userEvent from '@testing-library/user-event';
import ToggleBtn from './ToggleBtn';

describe('ToggleBtn Component', () => {
  const mockOnToggleData = jest.fn();

  beforeEach(() => {
    mockOnToggleData.mockClear();
  });

  test('should render toggle button', () => {
    render(<ToggleBtn showLiveData onToggleData={mockOnToggleData} />);
    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
  });

  test('should display "Show Today\'s Data" when showLiveData is true', () => {
    render(<ToggleBtn showLiveData onToggleData={mockOnToggleData} />);
    const button = screen.getByRole('button', { name: "Show Today's Data" });
    expect(button).toBeInTheDocument();
  });

  test('should display "Show Live Data" when showLiveData is false', () => {
    render(<ToggleBtn showLiveData={false} onToggleData={mockOnToggleData} />);
    const button = screen.getByRole('button', { name: "Show Live Data" });
    expect(button).toBeInTheDocument();
  });

  test('should call onToggleData when clicked', async () => {
    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
    render(<ToggleBtn showLiveData onToggleData={mockOnToggleData} />);
    const button = screen.getByRole('button');

    await user.click(button);
    expect(mockOnToggleData).toHaveBeenCalledTimes(1);
  }, 10000);

  test('should be disabled when disabled prop is true', () => {
    render(<ToggleBtn showLiveData onToggleData={mockOnToggleData} disabled />);
    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  test('should be enabled when disabled prop is false or undefined', () => {
    render(<ToggleBtn showLiveData onToggleData={mockOnToggleData} disabled={false} />);
    const button = screen.getByRole('button');
    expect(button).toBeEnabled();
  });
});
