<script lang="ts">
 import QuickSetting from "./QuickSetting.svelte";
 import { globalMode, themes, theme, type Theme } from "./settings";
 import { faEarthEurope, faPaintRoller, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import type { ComponentProps } from "svelte";
 import { writable } from "svelte/store";

 export let rows = 2;
 export let cols = 2;

 let showMenus = writable(Array.from(Array(rows*cols).keys()).map(() => false));

 // TODO: figure out how deep object reactivity works, this doesn't feel clean
 let settings: (ComponentProps<QuickSetting> & Record<string, any>)[];
 $: {
     settings = [
	 {
	     title: "Global Mode",
	     subtitle: $globalMode ? 'Enabled' : 'Disabled',
	     enabled: $globalMode,
	     icon: faEarthEurope,
	     click: () => $globalMode = !$globalMode,
	 },
	 {
	     title: "Theme",
	     subtitle: $theme,
	     enabled: true,
	     icon: faPaintRoller,
	     chevron: faChevronRight,
	     showMenu: $showMenus[1],
	     click: () => $showMenus[1] = !$showMenus[1],
	     menu: {
		 title: "Theme",
		 items: themes.map(t => ({
		     value: t,
		     enabled: $theme === t,
		 }))
	     },
	     menuClick: (theme: CustomEvent<Theme>) => $theme = theme.detail
	 },
	 {
	     title: "",
	     subtitle: '',
	 },
	 {
	     title: "",
	     subtitle: '',
	 }
     ];
 }

</script>

<div class="quick-settings h-100 w-100"
     style:--rows="{rows}"
     style:--cols="{cols}">
    {#each settings as setting, i}
	<QuickSetting
	    row="{Math.floor(i / rows) + 1}"
	    column="{(i % rows) + 1}"
	    enabled="{setting.enabled}"
	    icon="{setting.icon}"
	    chevron="{setting.chevron}"
	    title="{setting.title}"
	    bind:showMenu="{$showMenus[i]}"
	    menu="{setting.menu}"
	    subtitle="{setting.subtitle}"
	    on:click="{setting.click}"
	    on:menu:click="{setting.menuClick}" />
    {/each}
</div>

<style lang="scss">
 .quick-settings {
     display: grid;
     grid-template-rows: repeat(var(--rows), calc(100% / var(--rows)));
     grid-template-columns: repeat(var(--cols), calc(100% / var(--cols)));
 }
</style>
