import { Component, Input } from '@angular/core';
import { MenuItem } from './menu.model';
import { NgClass, NgForOf, NgIf } from '@angular/common';
import { RouterLink, RouterLinkActive } from '@angular/router';
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

@Component({
  selector: 'bgui-sublevel-menu',
  standalone: true,
  imports: [NgIf, NgForOf, NgClass, RouterLink, RouterLinkActive],
  template: `
    <ul
      *ngIf="collapsed && data.items && data.items.length > 0"
      [@submenu]="
        expanded
          ? {
              value: 'visible',
              params: {
                transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)',
                height: '*'
              }
            }
          : {
              value: 'hidden',
              params: {
                transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)',
                height: '0'
              }
            }
      "
      class="nk-menu-sub">
      <li *ngFor="let item of data.items" class="">
        <a
          class="nk-menu-link"
          (click)="handleClick(item)"
          *ngIf="item.items && item.items.length > 0">
          <i class="sublevel-link-icon fa fa-circle"></i>
          <span class="nk-menu-text" *ngIf="collapsed">{{ item.label }}</span>
          <i
            *ngIf="item.items && collapsed"
            class="bgui-menu-toggle"
            [ngClass]="
              !item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'
            ">
          </i>
        </a>
        <a
          class="nk-menu-link"
          *ngIf="!item.items || (item.items && item.items.length === 0)"
          [routerLink]="[item.routeLink]"
          routerLinkActive="active-sublevel"
          [routerLinkActiveOptions]="{ exact: true }">
          <span class="nk-menu-text" *ngIf="collapsed">{{ item.label }}</span>
        </a>
        <div *ngIf="item.items && item.items.length > 0">
          <bgui-sublevel-menu
            [collapsed]="collapsed"
            [multiple]="multiple"
            [expanded]="item.expanded"></bgui-sublevel-menu>
        </div>
      </li>
    </ul>
  `,
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('submenu', [
      state(
        'hidden',
        style({
          height: '0',
          overflow: 'hidden',
        })
      ),
      state(
        'visible',
        style({
          height: '*',
        })
      ),
      transition('visible <=> hidden', [
        style({ overflow: 'hidden' }),
        animate('{{transitionParams}}'),
        transition('void => *', animate(0)),
      ]),
    ]),
  ],
})
export class SublevelMenuComponent {
  @Input() data: MenuItem = {
    routeLink: '',
    icon: '',
    label: '',
    items: [],
  };
  @Input() collapsed = false;
  @Input() animating: boolean | undefined;
  @Input() expanded: boolean | undefined;
  @Input() multiple: boolean = false;

  handleClick(item: any): void {
    if (!this.multiple) {
      if (this.data.items && this.data.items.length > 0) {
        for (const modelItem of this.data.items) {
          if (item !== modelItem && modelItem.expanded) {
            modelItem.expanded = false;
          }
        }
      }
    }
    item.expanded = !item.expanded;
  }
}