import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import NoteReadView from './NoteReadView'
import type { Note } from '../types/note'

const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }

const renderView = (overrides: Partial<Note> = {}) => {
  const onEdit = vi.fn()
  const onDelete = vi.fn()
  render(<NoteReadView note={{ ...note, ...overrides }} onEdit={onEdit} onDelete={onDelete} />)
  return { onEdit, onDelete }
}

describe('NoteReadView', () => {
  it('displays the note title and content', () => {
    renderView()

    expect(screen.getByText('Courses')).toBeInTheDocument()
    expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
  })

  it('shows placeholders for a note without title or content', () => {
    renderView({ title: '', content: '' })

    expect(screen.getByText('Sans titre')).toBeInTheDocument()
    expect(screen.getByText('Note vide')).toBeInTheDocument()
  })

  it('calls onEdit when Éditer is clicked', () => {
    const { onEdit } = renderView()

    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))

    expect(onEdit).toHaveBeenCalled()
  })

  it('deletes the note after confirmation', () => {
    const { onDelete } = renderView()

    fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
    fireEvent.click(screen.getByRole('button', { name: 'Supprimer' }))

    expect(onDelete).toHaveBeenCalledWith(42)
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
  })

  it('does not delete when the confirmation is cancelled', () => {
    const { onDelete } = renderView()

    fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))

    expect(onDelete).not.toHaveBeenCalled()
  })
})