// @vitest-environment jsdom
import {afterEach, beforeEach, expect, it, vi} from 'vitest';
import {cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
import GameDetail from './GameDetail.jsx';
import {fetchRoutes, json} from '../test/fetchRoutes.js';
import {renderWithProviders} from '../test/renderWithProviders.jsx';

vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
// Stands in for a saved correction, which loads the game again.
vi.mock('../components/GameCorrectionDialog.jsx', () => ({
    default: ({onChanged}) => <button type="button" onClick={onChanged}>correction saved</button>,
}));

const game = {
    appid: 220, name: 'Half-Life 2', playtimeMinutes: 100, playtime2Weeks: 90, status: 'BACKLOG',
    rating: null, notes: null, priority: null, hasAchievements: false, statsVisible: false, achievements: [],
};

const gameLoads = () => fetch.mock.calls.filter(([url]) => url.endsWith('/api/library/games/220')).length;

beforeEach(() => {
    localStorage.setItem('tbp_session', '1');
    fetchRoutes({
        'GET /api/users/me': json(200, {role: 'AUDITOR', activeRole: 'AUDITOR'}),
        'GET /api/library/games/220': json(200, game),
    });
});

afterEach(() => {
    cleanup();
    localStorage.clear();
});

it('keeps unsaved notes while the game loads again after a correction', async () => {
    renderWithProviders(<GameDetail/>, {path: '/library/:appid', entries: ['/library/220']});
    fireEvent.change(await screen.findByLabelText('BACKLOG.NOTES_LABEL'), {target: {value: 'my draft'}});

    fireEvent.click(await screen.findByRole('button', {name: 'correction saved'}));

    await waitFor(() => expect(gameLoads()).toBe(2));
    await waitFor(() => expect(screen.getByLabelText('BACKLOG.NOTES_LABEL').value).toBe('my draft'));
});