import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
} from './drawer';
import React from 'react';

// Mocking Vaul Portal
vi.mock('vaul', async () => {
  const actual = await vi.importActual<typeof import('vaul')>('vaul');
  return {
    ...actual,
    Drawer: {
      ...(actual.Drawer as object),
      Portal: ({ children }: { children: React.ReactNode }) => (
        <div data-testid="portal">{children}</div>
      ),
    },
  };
});

describe('Drawer', () => {
  it('renders correctly', () => {
    render(
      <Drawer>
        <DrawerTrigger>Open Drawer</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Title</DrawerTitle>
            <DrawerDescription>Description</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>Footer</DrawerFooter>
        </DrawerContent>
      </Drawer>
    );

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

  it('shows content when open is true', () => {
    render(
      <Drawer open={true}>
        <DrawerTrigger>Open</DrawerTrigger>
        <DrawerContent>
          <DrawerTitle>Drawer Content</DrawerTitle>
        </DrawerContent>
      </Drawer>
    );

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

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Drawer>
        <DrawerTrigger>Open</DrawerTrigger>
      </Drawer>
    );
    expect(container.querySelector('[data-slot="drawer-trigger"]')).toBeInTheDocument();
  });
});