import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import CategoryBars from './CategoryBars';

const defaultProps = {
  title: 'Technical Category Contributions',
  getCategoryTooltipCopy: () => 'Tooltip copy',
};

describe('CategoryBars', () => {
  describe('given a category with positive data', () => {
    const categoryScores = {
      Security: {
        business: { percent_progress: 80, percent_progress_signed: 72 },
      },
    };

    it('should render the category label', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={categoryScores}
        />,
      );
      expect(screen.getByRole('button', { name: 'Security' })).toBeInTheDocument();
    });

    it('should not show a no-data indicator', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={categoryScores}
        />,
      );
      expect(screen.queryByRole('img', { name: 'No data available' })).not.toBeInTheDocument();
    });
  });

  describe('given a category with no data (empty score object)', () => {
    const categoryScores = { Security: {} };

    it('should render the category label', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={categoryScores}
        />,
      );
      expect(screen.getByRole('button', { name: 'Security' })).toBeInTheDocument();
    });

    it('should show a grey no-data indicator', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={categoryScores}
        />,
      );
      expect(screen.getByRole('img', { name: 'No data available' })).toBeInTheDocument();
    });
  });

  describe('given a category missing from categoryScores entirely', () => {
    it('should show a grey no-data indicator', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={{}}
        />,
      );
      expect(screen.getByRole('img', { name: 'No data available' })).toBeInTheDocument();
    });
  });

  describe('given a category with a score of zero', () => {
    const categoryScores = {
      Security: {
        business: { percent_progress: 0, percent_progress_signed: 0 },
      },
    };

    it('should show a grey no-data indicator', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security']}
          categoryScores={categoryScores}
        />,
      );
      expect(screen.getByRole('img', { name: 'No data available' })).toBeInTheDocument();
    });
  });

  describe('given multiple categories with mixed data', () => {
    const categoryScores = {
      Security: { business: { percent_progress: 60, percent_progress_signed: 50 } },
      Testing: {},
    };

    it('should only show a no-data indicator for the category with no data', () => {
      render(
        <CategoryBars
          {...defaultProps}
          categories={['Security', 'Testing']}
          categoryScores={categoryScores}
        />,
      );
      const noDataIndicators = screen.getAllByRole('img', { name: 'No data available' });
      expect(noDataIndicators).toHaveLength(1);
    });
  });
});