<script setup lang="ts">
import { Button, Splitter, SplitterPanel } from 'primevue'
import TreeNav from './components/TreeNav.vue'
import FilterDetail from './components/FilterDetail.vue'
import Info from './components/Info.vue'
import { computed, ref, watch } from 'vue'
import type { TreeNode } from 'primevue/treenode'
import * as O from 'fp-ts/Option'
import * as A from 'fp-ts/lib/Array';
import { pipe } from 'fp-ts/function'
import * as uuid from 'uuid';
import type { Filter, FilterConfig } from './models'

const darkMode = ref(document.documentElement.classList.contains('dark'))

const icon = computed(() => `pi pi-${darkMode.value ? "moon" : "sun"}`)

watch(darkMode, (dark) => {
  document.documentElement.classList.toggle(
    'dark',
    dark
  )
  localStorage.theme = dark ? 'dark' : 'light'
})
function onNodeSelect(node: TreeNode) {
}

function onNodeUnselect(node: TreeNode) {
}

let defaultFilters: Filter[] = [
  { type: 'leaf', id: uuid.v4(), name: "", show: true, enabled: true, rule: {} },
  {
    type: 'group', id: uuid.v4(), name: "", enabled: true, rule: {}, filters: [
      { type: 'leaf', id: uuid.v4(), name: "", show: true, enabled: true, rule: {} }
    ]
  }
]
const filters = ref(pipe(
  localStorage.getItem("filters"),
  O.fromNullable,
  O.map((value): FilterConfig => JSON.parse(value)),
  O.map(value => value.filters),
  O.getOrElse(() => defaultFilters),
))
const selectedFilter = ref<Filter>()
</script>

<template>
  <div class="flex flex-row gap-2 items-center flex-grow-0">
    <article class="prose dark:prose-invert">
      <h1>POE2 Loot Filter Config</h1>
    </article><Button :icon @click="darkMode = !darkMode" severity="secondary" variant="outlined" rounded />
  </div>
  <Splitter class="flex-1 min-h-0">
    <SplitterPanel>
      <TreeNav :filters @nodeSelect="selectedFilter = $event.data" @nodeUnselect="selectedFilter = undefined" />
    </SplitterPanel>
    <SplitterPanel class="flex flex-col">
      <FilterDetail v-if="selectedFilter" :filter="selectedFilter" />
      <Info v-else />
    </SplitterPanel>
  </Splitter>

</template>
