import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from './sheet';
import React from 'react';

// Mocking Portal
vi.mock('@radix-ui/react-dialog', async () => {
  const actual = await vi.importActual('@radix-ui/react-dialog');
  return {
    ...actual,
    Portal: ({ children }: { children: React.ReactNode }) => (
      <div data-testid="portal">{children}</div>
    ),
  };
});

describe('Sheet', () => {
  it('renders correctly', () => {
    render(
      <Sheet>
        <SheetTrigger>Open Sheet</SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Title</SheetTitle>
            <SheetDescription>Description</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    );

    expect(screen.getByText('Open Sheet')).toBeInTheDocument();
  });

  it('shows content when open is true', () => {
    render(
      <Sheet open={true}>
        <SheetTrigger>Open</SheetTrigger>
        <SheetContent>
          <SheetTitle>Sheet Content</SheetTitle>
        </SheetContent>
      </Sheet>
    );

    expect(screen.getByText('Sheet Content')).toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Sheet>
        <SheetTrigger>Trigger</SheetTrigger>
      </Sheet>
    );
    expect(container.querySelector('[data-slot="sheet-trigger"]')).toBeInTheDocument();
  });
});