<script lang="ts">
import type { FSNodeProperties } from "lib/FilesystemAPI.svelte";

let {
	properties = $bindable({} as FSNodeProperties)
}: {
	properties?: FSNodeProperties;
} = $props();

let current_theme = $state(-1)

const set_theme = (index: number) => {
	current_theme = index

	// Copy all the properties of the theme to the file, except for the theme
	// name
	Object.keys(themes[index]).forEach(key => {
		if (key !== "name") {
			properties[key] = themes[index][key]
		}
	})
}

const themes = [
	{
		name: "PD classic",
		brand_input_color: "#2d2d2d",
		brand_highlight_color: "#75b72d",
		brand_danger_color: "#821b3f",
		brand_background_color: "#141414",
		brand_body_color: "#1e1e1e",
		brand_card_color: "#282828",
	}, {
		name: "Nord (dark)",
		brand_input_color: "#4f596d",
		brand_highlight_color: "#a4be8c",
		brand_danger_color: "#bd5f69",
		brand_background_color: "#2f3541",
		brand_body_color: "#3b4252",
		brand_card_color: "#434c5f",
	}, {
		name: "Nord (light)",
		brand_input_color: "#cad2e1",
		brand_highlight_color: "#a4be8c",
		brand_danger_color: "#bd5f69",
		brand_background_color: "#d7dde8",
		brand_body_color: "#ebeef3",
		brand_card_color: "#e5e9f0",
	}, {
		name: "Black",
		brand_input_color: "#202020",
		brand_highlight_color: "#57e389",
		brand_danger_color: "#ed333b",
		brand_background_color: "#000000",
		brand_body_color: "#080808",
		brand_card_color: "#101010",
	}, {
		name: "White",
		brand_input_color: "#f4f4f4",
		brand_highlight_color: "#2ec27e",
		brand_danger_color: "#c01c28",
		brand_background_color: "#f8f8f8",
		brand_body_color: "#ffffff",
		brand_card_color: "#f0f0f0",
	}, {
		name: "Solarized (dark)",
		brand_input_color: "#084453",
		brand_highlight_color: "#849900",
		brand_danger_color: "#db302d",
		brand_background_color: "#002c38",
		brand_body_color: "#063540",
		brand_card_color: "#073c49",
	}, {
		name: "Solarized (light)",
		brand_input_color: "#e7dfc5",
		brand_highlight_color: "#849900",
		brand_danger_color: "#db302d",
		brand_background_color: "#ede7d3",
		brand_body_color: "#fdf5e2",
		brand_card_color: "#fcf2d8",
	}, {
		name: "Mocha",
		brand_input_color: "#313244",
		brand_highlight_color: "#a6e3a1",
		brand_danger_color: "#f38ba8",
		brand_background_color: "#1e1e2e",
		brand_body_color: "#181825",
		brand_card_color: "#313244",
	}, {
		name: "Dracula",
		brand_input_color: "#424450",
		brand_highlight_color: "#50FA7B",
		brand_danger_color: "#FF5555",
		brand_background_color: "#191A21",
		brand_body_color: "#21222C",
		brand_card_color: "#343746",
	}, {
		name: "Nova",
		brand_input_color: "#28033f",
		brand_highlight_color: "#57e389",
		brand_danger_color: "#ed333b",
		brand_background_color: "#0d0015",
		brand_body_color: "#130020",
		brand_card_color: "#1a002b",
	}, {
		name: "Green Phosphor",
		brand_input_color: "#001e09",
		brand_highlight_color: "#57e389",
		brand_danger_color: "#ed333b",
		brand_background_color: "#000502",
		brand_body_color: "#000903",
		brand_card_color: "#001707",
	}, {
		name: "Amber",
		brand_input_color: "#3c2b00",
		brand_highlight_color: "#f5c211",
		brand_danger_color: "#c01c28",
		brand_background_color: "#171100",
		brand_body_color: "#201700",
		brand_card_color: "#281d00",
	}
]
</script>

{#each themes as theme, index (theme.name)}
	<button class:button_highlight={current_theme === index} onclick={() => {set_theme(index)}}>
		{theme.name}
	</button>
{/each}
