import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { DistrictBarChart } from '../district-bar-chart';

// Mock recharts
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  BarChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
    <div data-testid="bar-chart" data-count={data.length}>{children}</div>
  ),
  Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
  XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
  YAxis: () => <div data-testid="yaxis" />,
  CartesianGrid: () => <div data-testid="grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
}));

const sampleData = [
  { district: 'Quận 1', price: 120, listings: 50 },
  { district: 'Quận 2', price: 80, listings: 40 },
  { district: 'Quận 7', price: 65, listings: 60 },
];

describe('DistrictBarChart', () => {
  it('renders responsive container', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
  });

  it('renders bar chart', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
  });

  it('renders bar with default dataKey "price"', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('bar-price')).toBeInTheDocument();
  });

  it('renders bar with custom dataKey', () => {
    render(<DistrictBarChart data={sampleData} dataKey="listings" />);
    expect(screen.getByTestId('bar-listings')).toBeInTheDocument();
  });

  it('renders XAxis with district key', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('xaxis-district')).toBeInTheDocument();
  });

  it('renders CartesianGrid', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('grid')).toBeInTheDocument();
  });

  it('renders Tooltip', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
  });

  it('passes data to chart', () => {
    render(<DistrictBarChart data={sampleData} />);
    expect(screen.getByTestId('bar-chart')).toHaveAttribute('data-count', '3');
  });
});