import type { Meta, StoryObj } from '@storybook/vue3'
import FdsTreeView from './FdsTreeView.vue'
import type { FdsTreeNode as TreeNodeType } from './types'

const demoTree: TreeNodeType = {
  nodeId: 'root',
  title: 'Root',
  data: { type: 'root' },
  children: [
    {
      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: 'rep-1', title: 'Q1 Report', data: { type: 'report', year: 2024 } },
                { nodeId: 'rep-2', title: 'Q2 Report', data: { type: 'report', year: 2024 } },
              ],
            },
          ],
        },
        {
          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 meta: Meta<typeof FdsTreeView> = {
  title: 'FDS/FdsTreeView',
  component: FdsTreeView,
  tags: ['autodocs'],
  args: {
    data: demoTree,
    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,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Basic: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTreeView },
    setup: () => ({ args }),
    template: '<FdsTreeView v-bind="args" />',
  }),
}