2eInk/src/lib/stores/device.svelte.ts

import { PRESET_DEVICES, DEFAULT_DEVICE } from '$lib/data/devices';
import type { Device, CustomDeviceFormData } from '$lib/types';

function createDeviceStore() {
	let selected = $state<Device>(DEFAULT_DEVICE);
	let customDevices = $state<Device[]>([]);

	const allDevices = $derived<Device[]>([...PRESET_DEVICES, ...customDevices]);

	function selectDevice(id: string): void {
		const device = allDevices.find((d) => d.id === id);
		if (device) {
			selected = device;
		}
	}

	function addCustomDevice(formData: CustomDeviceFormData): Device {
		const device: Device = {
			id: `custom_${formData.width}x${formData.height}`,
			name: formData.name,
			brand: 'Custom',
			width: formData.width,
			height: formData.height,
			greyLevels: formData.greyLevels,
			outputFormat: formData.outputFormat
		};

		customDevices = [...customDevices, device];
		selected = device;

		return device;
	}

	function removeCustomDevice(id: string): void {
		customDevices = customDevices.filter((d) => d.id !== id);
		if (selected.id === id) {
			selected = DEFAULT_DEVICE;
		}
	}

	return {
		get selected() {
			return selected;
		},
		get customDevices() {
			return customDevices;
		},
		get allDevices() {
			return allDevices;
		},
		selectDevice,
		addCustomDevice,
		removeCustomDevice
	};
}

export const deviceStore = createDeviceStore();