import { page } from 'vitest/browser';
import { describe, it, expect, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import type { PageProps } from './$types';

vi.mock('$app/forms', () => ({
	enhance: () => () => {}
}));

import Page from './+page.svelte';

const LICENSE = {
	id: 'lk1',
	key: 'AAAA-BBBB-CCCC-DDDD',
	systemName: 'Living Room',
	active: true,
	hasSchedule: false
};

const block = {
	id: 'b1',
	day: null as string | null,
	startMinutes: 6 * 60,
	endMinutes: 8 * 60,
	dynamicAudio: true,
	proclamations: [{ id: 'p1', name: 'Peace', categoryId: 1, groupId: 1 }]
};

function makeData(overrides: Partial<PageProps['data']> = {}): PageProps['data'] {
	return {
		userRoleId: null,
		licenses: [LICENSE],
		selectedLicenseId: LICENSE.id,
		type: null,
		blocks: [],
		categories: [{ id: 1, name: 'Physical' }],
		groups: [{ id: 1, name: 'General' }],
		proclamations: [{ id: 'p1', name: 'Peace', categoryId: 1, groupId: 1 }],
		...overrides
	};
}

function mountPage(data: PageProps['data']) {
	return render(Page, { params: {}, data, form: null });
}

describe('schedule page', () => {
	it('renders a schedule loaded for the selected system (same system, new data)', async () => {
		const result = mountPage(makeData());

		await expect
			.element(page.getByText('No schedule. Choose Daily or Weekly to start.'))
			.toBeInTheDocument();

		// The server reloads `data` after an action while the selected system id
		// stays the same; the view must follow the new data rather than a stale
		// local mirror.
		await result.rerender({ data: makeData({ type: 'daily', blocks: [block] }) });

		await expect.element(page.getByText('Every day')).toBeInTheDocument();
		await expect.element(page.getByText('Peace')).toBeInTheDocument();
		await expect.element(page.getByLabelText('Block 6:00 AM to 8:00 AM')).toBeInTheDocument();
		await expect
			.element(page.getByText('No schedule. Choose Daily or Weekly to start.'))
			.not.toBeInTheDocument();
	});
});