<script setup lang="ts">
import { ref } from 'vue'
import { useFdsI18n } from './plugin/useFdsI18n'
import FdsTreeView from './components/FdsTreeView/FdsTreeView.vue'
import type { FdsTreeNode } from './components/FdsTreeView/types'

// Mock tree data
const mockTreeData: FdsTreeNode<Record<string, unknown>>[] = [
  {
    nodeId: 'root-1',
    title: 'Documents',
    children: [
      {
        nodeId: 'doc-1',
        title: 'Work',
        children: [
          {
            nodeId: 'work-1',
            title: 'Projects',
            children: [
              {
                nodeId: 'proj-1',
                title: 'Project Alpha',
                data: { type: 'project', status: 'active' },
              },
              {
                nodeId: 'proj-2',
                title: 'Project Beta',
                data: { type: 'project', status: 'completed' },
              },
              {
                nodeId: 'proj-3',
                title: 'Project Gamma',
                data: { type: 'project', status: 'planning', person_name: 'Anna Sjöström' },
              },
            ],
          },
          {
            nodeId: 'work-2',
            title: 'Reports',
            children: [],
          },
        ],
      },
      {
        nodeId: 'doc-2',
        title: 'Personal',
        children: [
          { nodeId: 'pers-1', title: 'Photos', data: { type: 'folder', count: 150 } },
          { nodeId: 'pers-2', title: 'Videos', data: { type: 'folder', count: 25 } },
          { nodeId: 'pers-3', title: 'Music', data: { type: 'folder', count: 500 } },
        ],
      },
    ],
  },
  {
    nodeId: 'root-2',
    title: 'Applications',
    children: [
      {
        nodeId: 'app-1',
        title: 'Development',
        children: [
          { nodeId: 'dev-1', title: 'VS Code', data: { type: 'app', category: 'editor' } },
          { nodeId: 'dev-2', title: 'Terminal', data: { type: 'app', category: 'utility' } },
          { nodeId: 'dev-3', title: 'Git', data: { type: 'app', category: 'version-control' } },
        ],
      },
      {
        nodeId: 'app-2',
        title: 'Design',
        children: [
          { nodeId: 'design-1', title: 'Figma', data: { type: 'app', category: 'design' } },
          { nodeId: 'design-2', title: 'Sketch', data: { type: 'app', category: 'design' } },
        ],
      },
    ],
  },
  {
    nodeId: 'root-3',
    title: 'Settings',
    children: [
      { nodeId: 'set-1', title: 'General', data: { type: 'setting', category: 'preferences' } },
      { nodeId: 'set-2', title: 'Privacy', data: { type: 'setting', category: 'security' } },
      { nodeId: 'set-3', title: 'Notifications', data: { type: 'setting', category: 'alerts' } },
    ],
  },
]

const treeData: FdsTreeNode<Record<string, unknown>> = {
  nodeId: 'root',
  title: 'Root',
  children: mockTreeData,
  data: { type: 'root' },
}

type SelectedShape = Pick<FdsTreeNode, 'nodeId' | 'title' | 'data' | 'children'>
const selectedNodes = ref<SelectedShape[]>([])
const { t } = useFdsI18n()
</script>

<template>
  <div class="app p-8">
    <div class="border border-gray-200 rounded-lg p-4 mb-8">
      <h2 class="text-lg font-semibold mb-4">{{ t('App.treeViewTest') }}</h2>
      <FdsTreeView
        :data="treeData"
        :expandAllChildrenOnParentCheck="true"
        :expandChildrenOnParentCheck="true"
        :horizontalScroll="true"
        :indentation="36"
        :nodeCollapseIcon="'arrowUp'"
        :nodeExpandIcon="'arrowDown'"
        :searchEnabled="true"
        :searchExpandNodes="true"
        :searchHighlighting="true"
        :searchLabel="'Sök noder'"
        :searchMatchParams="['title']"
        :showIndeterminate="true"
        :showIndeterminateOnlyOnChildrenSelection="true"
        :titleTemplate="'[[title]] ([[nodeId]])'"
        :searchResultNoMatchesTitle="'Inga resultat hittades'"
        :searchResultNoMatchesBody="'Pröva sök på något annat'"
        :searchCountTemplate="'[[filteredNodes]] av [[totalNodes]] avdelningar'"
        :searchCountTemplateUnfiltered="'[[totalNodes]] avdelningar'"
        :popoverLabels="{
          parentAndChildren: 'Denna och alla underliggande',
          parent: 'Endast denna nivå',
        }"
        :searchInputTriggerLength="2"
        v-model:selectedNodes="selectedNodes"
      />
    </div>
  </div>
</template>
