<k-tree id="myTree"></k-tree>
<script type="module">
  import Tree from '/src/components/Tree.js';
  const tree = document.getElementById('myTree');
  tree.data = {
    name: 'John Doe',
    age: 30,
    active: true,
    hobbies: ['reading', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York'
    }
  };
</script>

<k-tree id="depthTree" depth="2"></k-tree>
<script type="module">
  import Tree from '/src/components/Tree.js';
  const tree = document.getElementById('depthTree');
  tree.data = {
    company: 'Tech Corp',
    departments: {
      engineering: {
        frontend: ['Alice', 'Bob'],
        backend: ['Charlie', 'Diana']
      },
      sales: {
        team: ['Eve', 'Frank']
      }
    }
  };
</script>

<k-tree id="customTree"></k-tree>
<script type="module">
  import Tree, { TreeNode } from '/src/components/Tree.js';
  import { html } from '/src/lit-all.min.js';

  class DateNode extends TreeNode {
    renderLabel(){
      const { month, day, year } = this.value;
      return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
    }

    getChildren(){ return null; }

    static detect = value => {
      return typeof value === 'object'
        && value !== null
        && 'month' in value
        && 'day' in value
        && 'year' in value;
    };
  }

  Tree.addNode(DateNode);

  const tree = document.getElementById('customTree');
  tree.data = {
    event: 'Tech Conference 2025',
    startDate: { month: 10, day: 15, year: 2025 },
    endDate: { month: 10, day: 17, year: 2025 },
    location: 'San Francisco',
    attendees: 250
  };
</script>

<button id="browseBtn">Browse Directory</button>
<k-tree id="dirTree" depth="1"></k-tree>
<script type="module">
  import Tree, { TreeNode } from '/src/components/Tree.js';
  import { html } from '/src/lit-all.min.js';

  class FileHandleNode extends TreeNode {
    render(){
      const ext = this.value.name.split('.').pop().toLowerCase();
      const iconName = { js: 'code', html: 'code_blocks', css: 'code',
        json: 'file-text', md: 'file-text' }[ext] ?? 'file';
      return html`<span class="d-b"><k-icon name="${iconName}"></k-icon> ${this.value.name}</span>`;
    }
    getChildren(){ return null; }
    static detect = v => v instanceof FileSystemFileHandle;
  }

  class DirHandleNode extends TreeNode {
    static properties = { ...TreeNode.properties, entries: { state: true } };

    connectedCallback(){
      super.connectedCallback();
      (async () => {
        const entries = [];
        for await(const [name, handle] of this.value.entries())
          entries.push([name, handle]);
        this.entries = entries;
      })();
    }

    getChildren(){ return this.entries ?? []; }
    renderIcon(){
      return html`<k-icon name="${this.opened ? 'folder-open' : 'folder'}"></k-icon>`;
    }
    render(){
      const children = this.getChildren();
      return html`
        <div>
          <button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
            ${this.renderIcon()} ${this.value.name}
          </button>
          ${this.opened ? html`<div class="pl">${children.map(([k, v]) => Tree.renderValue(v, k, this.depth + 1, this.maxDepth))}</div>` : ''}
        </div>
      `;
    }
    static detect = v => v instanceof FileSystemDirectoryHandle;
  }

  Tree.addNode(FileHandleNode, DirHandleNode);

  document.getElementById('browseBtn').onclick = async () => {
    const handle = await showDirectoryPicker();
    document.getElementById('dirTree').data = handle;
  };
</script>