import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select';
import React from 'react';

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

describe('Select', () => {
  it('renders correctly', () => {
    render(
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
        </SelectContent>
      </Select>
    );

    expect(screen.getByText('Select fruit')).toBeInTheDocument();
  });

  it('shows content when open is true', () => {
    render(
      <Select open={true}>
        <SelectTrigger>
          <SelectValue placeholder="Select fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
        </SelectContent>
      </Select>
    );

    expect(screen.getByText('Apple')).toBeInTheDocument();
  });

  it('is disabled when disabled prop is true', () => {
    render(
      <Select disabled>
        <SelectTrigger aria-label="Trigger">
          <SelectValue placeholder="Select" />
        </SelectTrigger>
      </Select>
    );
    expect(screen.getByRole('combobox')).toBeDisabled();
  });

  it('renders SelectTrigger correctly with different sizes', () => {
    const { rerender } = render(
      <Select>
        <SelectTrigger size="sm" aria-label="Small">
          <SelectValue placeholder="Small" />
        </SelectTrigger>
      </Select>
    );
    expect(screen.getByRole('combobox')).toHaveClass('h-8');

    rerender(
      <Select>
        <SelectTrigger size="md" aria-label="Medium">
          <SelectValue placeholder="Medium" />
        </SelectTrigger>
      </Select>
    );
    expect(screen.getByRole('combobox')).toHaveClass('h-10');

    rerender(
      <Select>
        <SelectTrigger size="lg" aria-label="Large">
          <SelectValue placeholder="Large" />
        </SelectTrigger>
      </Select>
    );
    expect(screen.getByRole('combobox')).toHaveClass('h-12');
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select" />
        </SelectTrigger>
      </Select>
    );
    expect(container.querySelector('[data-slot="select-trigger"]')).toBeInTheDocument();
  });
});