import { writable } from 'svelte/store';

const todos = [
	writable({ done: false, text: 'write docs' }),
	writable({ done: false, text: 'implement contextual stores' }),
	writable({ done: false, text: 'go outside' })
];

export default {
	error:
		'Stores must be declared at the top level of the component (this may change in a future version of Svelte)',

	get props() {
		return { todos };
	},

	html: `
		<label>
			<input type=checkbox>
			[todo] write docs
		</label>

		<label>
			<input type=checkbox>
			[todo] implement contextual stores
		</label>

		<label>
			<input type=checkbox>
			[todo] go outside
		</label>
	`,

	async test({ assert, target, window }) {
		const inputs = target.querySelectorAll('input');
		const change = new window.MouseEvent('change');

		inputs[1].checked = true;
		await inputs[1].dispatchEvent(change);

		assert.htmlEqual(
			target.innerHTML,
			`
			<label>
				<input type=checkbox>
				[todo] write docs
			</label>

			<label>
				<input type=checkbox>
				[done] implement contextual stores
			</label>

			<label>
				<input type=checkbox>
				[todo] go outside
			</label>
		`
		);

		await todos[0].update((todo) => ({ done: !todo.done, text: todo.text }));

		assert.htmlEqual(
			target.innerHTML,
			`
			<label>
				<input type=checkbox>
				[done] write docs
			</label>

			<label>
				<input type=checkbox>
				[done] implement contextual stores
			</label>

			<label>
				<input type=checkbox>
				[todo] go outside
			</label>
		`
		);
	}
};