import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';

function Fixture(props: {
  clearable?: boolean;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}) {
  return (
    <Select defaultValue={props.defaultValue} onValueChange={props.onValueChange}>
      <SelectTrigger aria-label="City" clearable={props.clearable}>
        <SelectValue placeholder="Pick a city" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="baku">Baku</SelectItem>
        <SelectItem value="ganja">Ganja</SelectItem>
      </SelectContent>
    </Select>
  );
}

describe('Select', () => {
  describe('clearable', () => {
    it('offers no reset control by default', () => {
      render(<Fixture defaultValue="baku" />);

      expect(screen.queryByRole('button', { name: 'Clear selection' })).toBeNull();
    });

    /* Two mounts rather than a rerender: `defaultValue` seeds the mirror once,
       the way it does for any uncontrolled React input, so changing the prop on
       a live instance is a no-op by design. */
    it('offers one only once there is a value', () => {
      const { unmount } = render(<Fixture clearable />);
      expect(screen.queryByRole('button', { name: 'Clear selection' })).toBeNull();
      unmount();

      render(<Fixture clearable defaultValue="baku" />);
      expect(screen.getByRole('button', { name: 'Clear selection' })).toBeInTheDocument();
    });

    it('resets the value and reports it', async () => {
      const onValueChange = vi.fn();
      const user = userEvent.setup();
      render(<Fixture clearable defaultValue="baku" onValueChange={onValueChange} />);

      await user.click(screen.getByRole('button', { name: 'Clear selection' }));

      expect(onValueChange).toHaveBeenCalledWith('');
      expect(screen.queryByRole('button', { name: 'Clear selection' })).toBeNull();
    });

    /*
     * `SelectPrimitive.Trigger` is a real <button>, so the reset control cannot
     * live inside it — nested interactive elements are invalid HTML and axe
     * flags them. It is a sibling layered over the trigger instead.
     */
    it('keeps the reset control outside the trigger', () => {
      render(<Fixture clearable defaultValue="baku" />);

      const trigger = screen.getByRole('combobox', { name: 'City' });
      const clear = screen.getByRole('button', { name: 'Clear selection' });

      expect(trigger).not.toContainElement(clear);
    });

    it('renames the control for another language', () => {
      render(
        <Select defaultValue="baku">
          <SelectTrigger clearable clearLabel="Seçimi təmizlə">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="baku">Baku</SelectItem>
          </SelectContent>
        </Select>
      );

      expect(screen.getByRole('button', { name: 'Seçimi təmizlə' })).toBeInTheDocument();
    });
  });

  describe('controlled use', () => {
    it('lets the caller stay in charge of the value', async () => {
      const onValueChange = vi.fn();
      const user = userEvent.setup();

      render(
        <Select value="baku" onValueChange={onValueChange}>
          <SelectTrigger clearable>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="baku">Baku</SelectItem>
          </SelectContent>
        </Select>
      );

      await user.click(screen.getByRole('button', { name: 'Clear selection' }));

      /* The mirror must not overrule a controlled value: the caller was told,
         and the control is still there because the prop has not changed. */
      expect(onValueChange).toHaveBeenCalledWith('');
      expect(screen.getByRole('button', { name: 'Clear selection' })).toBeInTheDocument();
    });
  });
});