import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { useState } from 'react';

import { UniversalDropdown, UniversalDropdownOption } from '@/app/components/profile/UniversalDropdown';

function DropdownHarness() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button">Outside area</button>
      <UniversalDropdown open={open} onOpenChange={setOpen} label="Destroy time">
        <UniversalDropdownOption onSelect={() => setOpen(false)} label="После прочтения" />
      </UniversalDropdown>
    </>
  );
}

describe('UniversalDropdown', () => {
  it('closes when the user clicks outside the dropdown', async () => {
    render(<DropdownHarness />);

    fireEvent.click(screen.getByRole('button', { name: 'Destroy time' }));
    expect(screen.getByRole('button', { name: 'После прочтения' })).toBeInTheDocument();

    fireEvent.pointerDown(screen.getByRole('button', { name: 'Outside area' }));

    await waitFor(() => {
      expect(screen.queryByRole('button', { name: 'После прочтения' })).not.toBeInTheDocument();
    });
  });
});