import React from 'react';
import '@testing-library/jest-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import { PromptProvider, usePrompt } from './prompt';

function Demo() {
  const { prompt } = usePrompt();
  return (
    <button onClick={() => void prompt({ title: 'Rename attachment', message: 'Choose a new name', defaultValue: 'resume.pdf', confirmLabel: 'Rename' })}>
      Open prompt
    </button>
  );
}

test('renders app-owned prompt dialog', async () => {
  render(
    <PromptProvider>
      <Demo />
    </PromptProvider>,
  );

  fireEvent.click(screen.getByRole('button', { name: /open prompt/i }));

  expect(await screen.findByText(/choose a new name/i)).toBeInTheDocument();
  expect(screen.getByDisplayValue('resume.pdf')).toBeInTheDocument();
  expect(screen.getByRole('textbox', { name: 'Choose a new name' })).toHaveAccessibleDescription('10/180');
  expect(screen.getByRole('textbox', { name: 'Choose a new name' })).toHaveFocus();
  expect(screen.getByRole('dialog', { name: 'Rename attachment' })).toHaveAccessibleDescription('Choose a new name');
  expect(screen.getByRole('button', { name: /rename/i })).toBeInTheDocument();
});

test('shows prompt input helper length text', async () => {
  render(
    <PromptProvider>
      <Demo />
    </PromptProvider>,
  );

  fireEvent.click(screen.getByRole('button', { name: /open prompt/i }));

  expect(await screen.findByText(/10\/180/i)).toBeInTheDocument();
});