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

import { NzCheckboxModule, NzCheckboxOption } from 'ng-zorro-antd/checkbox';
import { NzDividerModule } from 'ng-zorro-antd/divider';

@Component({
  selector: '<%= selector %>',
  imports: [FormsModule, NzCheckboxModule, NzDividerModule],
  <% if(inlineTemplate) { %>template: `
    <label
      nz-checkbox
      [(ngModel)]="allChecked"
      (ngModelChange)="updateAllChecked()"
      [nzIndeterminate]="value.length > 0 && value.length !== options.length"
    >
      Check all
    </label>

    <nz-divider />

    <nz-checkbox-group
      [nzOptions]="options"
      [(ngModel)]="value"
      (ngModelChange)="updateSingleChecked()"
    ></nz-checkbox-group>
  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
})
export class <%= classify(name) %>Component {
  isAllCheckedFirstChange = true;
  allChecked = false;
  value: Array<string | number> = ['Apple', 'Orange'];
  options: NzCheckboxOption[] = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' }
  ];

  updateAllChecked(): void {
    if (!this.isAllCheckedFirstChange) {
      this.value = this.allChecked ? this.options.map(item => item.value) : [];
    }
    this.isAllCheckedFirstChange = false;
  }

  updateSingleChecked(): void {
    this.allChecked = this.value.length === this.options.length;
  }
}
