import {ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild} from '@angular/core';
import {MatTree,  MatTreeNode} from '@angular/material/tree';
import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
import {MatDivider, MatListItem, MatNavList} from '@angular/material/list';
import {MatIcon} from '@angular/material/icon';
import {RouterLink} from '@angular/router';
import {
  MatAccordion, MatExpansionModule,
  MatExpansionPanel,
  MatExpansionPanelDescription,
  MatExpansionPanelTitle
} from '@angular/material/expansion';
import {MatDatepicker, MatDatepickerInput} from '@angular/material/datepicker';
import {provideNativeDateAdapter} from '@angular/material/core';
import {MatButton} from '@angular/material/button';

@Component({
  selector: 'app-side-bar',
  imports: [
    MatTree,
    MatTreeNode,
    MatLabel,
    MatNavList,
    MatListItem,
    MatIcon,
    RouterLink,
    MatExpansionPanel,
    MatExpansionPanelTitle,
    MatExpansionPanelDescription,
    MatFormField,
    MatInput,
    MatDatepickerInput,
    MatDatepicker,
    MatDivider,
    MatAccordion,
    MatButton,
    MatExpansionModule
  ],
  templateUrl: './side-bar.component.html',
  styleUrl: './side-bar.component.scss',
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [provideNativeDateAdapter()],
})



export class SideBarComponent {
  isCollapsed = false;

  accordion = viewChild.required(MatAccordion);
}

const TREE_DATA: TreeNode[] = [
  {
    name: 'Fruit',
    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
  },
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
      },
      {
        name: 'Orange',
        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
      },
    ],
  },
];

interface TreeNode {
  name: string;
  children?: TreeNode[];
}