import React from 'react';
import { fireEvent } from '@testing-library/react';

import { render } from '../../../../vitest/render';

import { PasswordField } from './PasswordField';

describe('PasswordField reveal toggle', () => {
  it('toggles input type between password and text when the reveal button is clicked', () => {
    const { getByLabelText, getByRole } = render(
      <PasswordField label='Password:' value='secret' onChange={() => {}} />
    );

    const input = getByLabelText('Password:') as HTMLInputElement;
    const toggleButton = getByRole('button');

    expect(input.type).toBe('password');
    expect(toggleButton.getAttribute('aria-pressed')).toBe('false');
    expect(toggleButton.getAttribute('aria-label')).toBe('Show password');

    fireEvent.click(toggleButton);

    expect(input.type).toBe('text');
    expect(toggleButton.getAttribute('aria-pressed')).toBe('true');

    fireEvent.click(toggleButton);

    expect(input.type).toBe('password');
    expect(toggleButton.getAttribute('aria-pressed')).toBe('false');
  });

  it('hides the password again when focus leaves the field', () => {
    const { getByLabelText, getByRole } = render(
      <PasswordField label='Password:' value='secret' onChange={() => {}} />
    );

    const input = getByLabelText('Password:') as HTMLInputElement;
    const toggleButton = getByRole('button');

    fireEvent.click(toggleButton);

    expect(input.type).toBe('text');

    fireEvent.blur(input, { relatedTarget: document.body });

    expect(input.type).toBe('password');
    expect(toggleButton.getAttribute('aria-pressed')).toBe('false');
  });

  it('disables the reveal button when the field is empty', () => {
    const { getByRole } = render(<PasswordField label='Password:' value='' onChange={() => {}} />);

    expect((getByRole('button') as HTMLButtonElement).disabled).toBe(true);
  });
});

describe('PasswordField value handling', () => {
  it('does not show a strength indicator for a controlled empty value', () => {
    const { container } = render(<PasswordField label='Password:' value='' onChange={() => {}} strengthIndicator />);

    expect(container.querySelector('.passwordField__strengthIndicator')).toBeNull();
  });

  it('renders an uncontrolled input when only defaultValue is provided', () => {
    const { getByLabelText } = render(<PasswordField label='Password:' defaultValue='initial' />);

    expect((getByLabelText('Password:') as HTMLInputElement).value).toBe('initial');
  });
});