import React from 'react';
import { render, screen } from '@testing-library/react';
import BarChartStack from '../components/BarChartStack.js';
import '@testing-library/jest-dom';

describe('BarChartStack', () => {
  const mockData = [
    {
      Results: [
        {
          LoginDate: '2023-05-15T09:00:00Z',
          StartedOn: '2023-05-15T09:00:00Z',
          ActiveCount: 5,
          IdleCount: 3,
          SleepCount: 2,
          CallsCount: 4,
          ApplicationCount: 6
        }
      ]
    }
  ];

  const mockDataMultiple = [
    {
      Results: [
        {
          LoginDate: '2023-05-15T09:00:00Z',
          StartedOn: '2023-05-15T09:00:00Z',
          ActiveCount: 5,
          IdleCount: 3,
          SleepCount: 2,
          CallsCount: 4,
          ApplicationCount: 6
        },
        {
          LoginDate: '2023-05-16T09:00:00Z',
          StartedOn: '2023-05-16T09:00:00Z',
          ActiveCount: 8,
          IdleCount: 2,
          SleepCount: 1,
          CallsCount: 7,
          ApplicationCount: 10
        }
      ]
    }
  ];

  it('renders bar chart for Sessions', () => {
    render(<BarChartStack data={mockData} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders bar chart for Calls', () => {
    render(<BarChartStack data={mockData} selectedValue="Calls" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders bar chart for default view (Applications)', () => {
    render(<BarChartStack data={mockData} selectedValue="Apps" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('shows fallback when no data', () => {
    render(<BarChartStack data={[]} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByText(/No Data found/i)).toBeInTheDocument();
  });

  it('shows fallback when data is null', () => {
    render(<BarChartStack data={null} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByText(/No Data found/i)).toBeInTheDocument();
  });

  it('shows fallback when data has no Results', () => {
    render(<BarChartStack data={[{}]} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByText(/No Data found/i)).toBeInTheDocument();
  });

  it('renders chart container with barstack-chart class', () => {
    const { container } = render(<BarChartStack data={mockData} selectedValue="Sessions" selectedValue3="X" />);
    expect(container.querySelector('.barstack-chart')).toBeInTheDocument();
  });

  it('renders chart with multiple data points for Sessions', () => {
    render(<BarChartStack data={mockDataMultiple} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders chart with multiple data points for Calls', () => {
    render(<BarChartStack data={mockDataMultiple} selectedValue="Calls" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders chart with multiple data points for Applications', () => {
    render(<BarChartStack data={mockDataMultiple} selectedValue="Apps" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders correctly when selectedValue changes', () => {
    const { rerender } = render(<BarChartStack data={mockData} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
    
    rerender(<BarChartStack data={mockData} selectedValue="Calls" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
    
    rerender(<BarChartStack data={mockData} selectedValue="Apps" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('renders correctly when data changes', () => {
    const { rerender } = render(<BarChartStack data={mockData} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
    
    rerender(<BarChartStack data={mockDataMultiple} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
  });

  it('handles undefined Results gracefully', () => {
    const dataWithUndefinedResults = [{ Results: undefined }];
    render(<BarChartStack data={dataWithUndefinedResults} selectedValue="Sessions" selectedValue3="X" />);
    expect(screen.getByText(/No Data found/i)).toBeInTheDocument();
  });
});
