import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '../Tabs';
import React from 'react';

describe('Tabs Component', () => {
    it('debería renderizar las pestañas y mostrar solo el contenido de la pestaña activa', () => {
        render(
            <TabsRoot defaultValue="tab1">
                <TabsList>
                    <TabsTrigger value="tab1">Pestaña 1</TabsTrigger>
                    <TabsTrigger value="tab2">Pestaña 2</TabsTrigger>
                </TabsList>
                <TabsContent value="tab1">Contenido 1</TabsContent>
                <TabsContent value="tab2">Contenido 2</TabsContent>
            </TabsRoot>
        );

        expect(screen.getByText('Contenido 1')).toBeDefined();
        expect(screen.queryByText('Contenido 2')).toBeNull();

        const trigger2 = screen.getByText('Pestaña 2');
        fireEvent.click(trigger2);

        expect(screen.queryByText('Contenido 1')).toBeNull();
        expect(screen.getByText('Contenido 2')).toBeDefined();
    });

    it('debería soportar valor controlado', () => {
        const handleValueChange = vi.fn();
        render(
            <TabsRoot value="tab2" onValueChange={handleValueChange}>
                <TabsList>
                    <TabsTrigger value="tab1">Pestaña 1</TabsTrigger>
                    <TabsTrigger value="tab2">Pestaña 2</TabsTrigger>
                </TabsList>
                <TabsContent value="tab1">Contenido 1</TabsContent>
                <TabsContent value="tab2">Contenido 2</TabsContent>
            </TabsRoot>
        );

        expect(screen.getByText('Contenido 2')).toBeDefined();
        expect(screen.queryByText('Contenido 1')).toBeNull();

        const trigger1 = screen.getByText('Pestaña 1');
        fireEvent.click(trigger1);

        expect(handleValueChange).toHaveBeenCalledWith('tab1');
    });
});