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

import { Input } from './input';

describe('Input', () => {
  describe('adornment slots', () => {
    /* The bare path is the one every existing consumer is on, so it has to stay
       byte-for-byte the same element — no wrapper, no shifted selector. */
    it('renders a lone <input> when neither slot is filled', () => {
      const { container } = render(<Input placeholder="Email" />);

      expect(container.querySelector('[data-slot="input-wrapper"]')).toBeNull();
      expect(screen.getByPlaceholderText('Email')).toHaveAttribute('data-slot', 'input');
    });

    it('wraps the field once a slot is filled', () => {
      const { container } = render(<Input startElement={<span>@</span>} placeholder="Handle" />);

      const wrapper = container.querySelector('[data-slot="input-wrapper"]');
      expect(wrapper).not.toBeNull();
      expect(wrapper).toContainElement(screen.getByPlaceholderText('Handle'));
      expect(container.querySelector('[data-slot="input-start-element"]')).toHaveTextContent('@');
    });

    it('keeps the leading slot inert and the trailing slot interactive', () => {
      const { container } = render(
        <Input startElement={<span>@</span>} endElement={<button type="button">Clear</button>} />
      );

      /* A click on a leading icon should land on the field, not stop at the
         icon; a trailing slot is where a real control belongs. */
      expect(container.querySelector('[data-slot="input-start-element"]')).toHaveClass(
        'pointer-events-none'
      );
      expect(container.querySelector('[data-slot="input-end-element"]')).not.toHaveClass(
        'pointer-events-none'
      );
      expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument();
    });

    /* Same split as InputNumber: with a slot filled the wrapper is the visible
       box, so `className="w-64"` has to size that and not the inner field. */
    it('puts className on the wrapper and classNames.input on the field', () => {
      const { container } = render(
        <Input startElement={<span>@</span>} className="w-64" classNames={{ input: 'text-right' }} />
      );

      expect(container.querySelector('[data-slot="input-wrapper"]')).toHaveClass('w-64');
      expect(container.querySelector('[data-slot="input"]')).toHaveClass('text-right');
    });

    it('still lands className on the field with no slots', () => {
      const { container } = render(<Input className="w-64" />);

      expect(container.querySelector('[data-slot="input"]')).toHaveClass('w-64');
    });
  });
});