import { describe, expect, it, afterEach } from 'vitest'
import { render, screen, cleanup } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { FormProvider, useForm } from 'react-hook-form'
import { IntlProvider } from 'react-intl'
import { PasswordInput } from './PasswordInput'

afterEach(() => {
  cleanup()
})

function FormWrapper({
  children,
  defaultValues = { password: '' },
}: {
  children: React.ReactNode
  defaultValues?: Record<string, string>
}) {
  const methods = useForm({ defaultValues })
  return (
    <IntlProvider locale="en" messages={{}}>
      <FormProvider {...methods}>
        <form>{children}</form>
      </FormProvider>
    </IntlProvider>
  )
}

const renderPasswordInput = (
  props: React.ComponentProps<typeof PasswordInput> = {},
  defaultValues?: Record<string, string>
) => {
  return render(
    <FormWrapper defaultValues={defaultValues}>
      <PasswordInput {...props} />
    </FormWrapper>
  )
}

describe('PasswordInput', () => {
  describe('rendering', () => {
    it('renders with default password label', () => {
      renderPasswordInput()
      expect(screen.getByLabelText('Password')).toBeTruthy()
    })

    it('renders with custom label', () => {
      renderPasswordInput({ label: 'Enter your password' })
      expect(screen.getByLabelText('Enter your password')).toBeTruthy()
    })

    it('renders with new password label when isNewPassword is true', () => {
      renderPasswordInput({ isNewPassword: true })
      expect(screen.getByLabelText('New password')).toBeTruthy()
    })
  })

  describe('visibility toggle', () => {
    it('shows visibility toggle button by default', () => {
      renderPasswordInput()
      expect(screen.getByLabelText('Show password')).toBeTruthy()
    })

    it('hides visibility toggle when visibilityToggleable is false', () => {
      renderPasswordInput({ visibilityToggleable: false })
      expect(screen.queryByLabelText('Show password')).toBeNull()
      expect(screen.queryByLabelText('Hide password')).toBeNull()
    })
  })

  describe('disabled state', () => {
    it('disables the input when disabled prop is true', () => {
      renderPasswordInput({ disabled: true })
      expect(screen.getByLabelText('Password')).toHaveProperty('disabled', true)
    })
  })

  describe('form integration', () => {
    it('updates form value when typing', async () => {
      const user = userEvent.setup()
      renderPasswordInput()

      const input = screen.getByLabelText('Password')
      await user.type(input, 'secret123')

      expect(input).toHaveProperty('value', 'secret123')
    })

    it('uses custom name prop', async () => {
      const user = userEvent.setup()
      renderPasswordInput({ name: 'confirmPassword' }, { confirmPassword: '' })

      const input = screen.getByLabelText('Password')
      await user.type(input, 'test')

      expect(input).toHaveProperty('value', 'test')
    })
  })
})