import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, test, expect } from 'vitest';
import MarkNote from './MarkNote.jsx';

test('a note can be added, and is saved trimmed', async () => {
  const onSave = vi.fn();
  const user = userEvent.setup();
  render(<MarkNote note="" onSave={onSave} label="highlight note" />);
  await user.click(screen.getByRole('button', { name: /add highlight note/i }));
  await user.type(screen.getByLabelText('Your highlight note'), '  Pray this daily  ');
  await user.click(screen.getByRole('button', { name: 'Save' }));
  expect(onSave).toHaveBeenCalledWith('Pray this daily');
});

test('an existing note is shown, and can be edited or cleared', async () => {
  const onSave = vi.fn();
  const user = userEvent.setup();
  render(<MarkNote note="First thought" onSave={onSave} label="note" />);
  expect(screen.getByText('First thought')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: 'Edit note' }));
  const box = screen.getByLabelText('Your note');
  expect(box).toHaveValue('First thought');
  await user.clear(box);
  await user.click(screen.getByRole('button', { name: 'Save' })); // an empty note removes it
  expect(onSave).toHaveBeenCalledWith('');
});

test('cancelling keeps what was there; Ctrl+Enter saves', async () => {
  const onSave = vi.fn();
  const user = userEvent.setup();
  render(<MarkNote note="Keep me" onSave={onSave} />);
  await user.click(screen.getByRole('button', { name: /edit/i }));
  await user.type(screen.getByLabelText(/your/i), ' more');
  await user.click(screen.getByRole('button', { name: 'Cancel' }));
  expect(onSave).not.toHaveBeenCalled();
  expect(screen.getByText('Keep me')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /edit/i }));
  await user.type(screen.getByLabelText(/your/i), ' more{Control>}{Enter}{/Control}');
  expect(onSave).toHaveBeenCalledWith('Keep me more');
});