import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzTreeSelectModule, NzPlacementType } from 'ng-zorro-antd/tree-select';

@Component({
  selector: '<%= selector %>',
  imports: [FormsModule, NzRadioModule, NzTreeSelectModule],
  <% if(inlineTemplate) { %>template: `
    <nz-radio-group [(ngModel)]="placement">
      @for (item of list; track item) {
        <label nz-radio-button [nzValue]="item">{{ item }}</label>
      }
    </nz-radio-group>
    <br />
    <br />
    <nz-tree-select
      nzPlaceHolder="Please select"
      [nzPlacement]="placement"
      [(ngModel)]="value"
      [nzNodes]="nodes"
      [nzDropdownStyle]="{ width: '300px' }"
      nzDefaultExpandAll
      (ngModelChange)="onChange($event)"
    ></nz-tree-select>
  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
})
export class <%= classify(name) %>Component {
  list: NzPlacementType[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
  placement: NzPlacementType = 'topLeft';
  value: string[] = [];
  readonly nodes = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          children: [
            { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
            { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
          ]
        },
        {
          title: 'parent 1-1',
          key: '1002',
          children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
        }
      ]
    }
  ];

  onChange($event: string[]): void {
    console.log($event);
  }
}
