import { tcgDecks } from '#lib/content';
import type { TcgCard, TcgSet } from './types';

export type BrowserTab = 'decks' | 'builder';

export class TcgBrowserState {
	tab = $state<BrowserTab>('decks');
	deckId = $state(tcgDecks[0]?.id ?? '');
	searchedName = $state('');
	supertype = $state('');
	energyType = $state('');
	selectedSet = $state<TcgSet | null>(null);
	setId = $derived(this.selectedSet?.id ?? '');
	page = $state(1);
	openedCard = $state<TcgCard | null>(null);

	setSearchedName(name: string) {
		if (name === this.searchedName) return;
		this.searchedName = name;
		this.page = 1;
	}

	toggleSupertype(supertype: string) {
		this.supertype = this.supertype === supertype ? '' : supertype;
		this.page = 1;
	}

	toggleEnergyType(energyType: string) {
		this.energyType = this.energyType === energyType ? '' : energyType;
		this.page = 1;
	}

	toggleSet(set: TcgSet | null) {
		this.selectedSet = set && set.id !== this.setId ? set : null;
		this.page = 1;
	}

	openCard(card: TcgCard | null) {
		this.openedCard = card;
	}
}