<mat-toolbar fxLayoutGap="5px">
  <!-- <mat-checkbox
    [checked]="isMasterToggled"
    [indeterminate]="
      toggledItemNumber > 0 && toggledItemNumber < todoList.length
    "
    (change)="masterToggle()"
  ></mat-checkbox> -->

  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>All</button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>Done</button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>Undone</button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>Read</button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>Unread</button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>
      Starred
    </button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>
      Unstarred
    </button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>
      Important
    </button>
    <button (click)="onTodoOptionSelected($event)" mat-menu-item>
      Unimportant
    </button>
  </mat-menu>

  <button mat-icon-button [matMenuTriggerFor]="tagMenu">
    <mat-icon>label</mat-icon>
  </button>
  <mat-menu #tagMenu="matMenu">
    <button
      mat-menu-item
      (click)="onTodoOptionSelected({ target: { innerText: 'All' } })"
    >
      all
    </button>
    <button
      mat-menu-item
      *ngFor="let tag of tagList"
      (click)="filterTodoListOnTag(tag)"
    >
      {{ tag.name }}
    </button>
  </mat-menu>

  <div fxLayout="row" fxFlex="1 1 0%" fxLayoutAlign="end center">
    <button mat-raised-button color="primary" routerLink="/todo/add">
      Create Todo
    </button>
  </div>
</mat-toolbar>

<div cdkDropList class="todo-list" (cdkDropListDropped)="drop($event)">
  <div
    class="todo-box"
    *ngIf="todoList?.length < 1"
    fxLayout="row"
    fxLayoutAlign="center center"
  >
    Loading...
  </div>
  <div
    class="todo-box"
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="20px"
    *ngFor="let todo of (todoList | todoSearch: searchTerm)"
    cdkDrag
    cdkDragHandle
  >
    <!-- <mat-checkbox
      [checked]="todo?.selected"
      (change)="toggleCheckBox(todo)"
    ></mat-checkbox> -->
    <mat-icon class="move-handler">open_with</mat-icon>

    <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="1 1 0%">
      <div
        style="cursor: pointer;"
        fxLayout="column"
        fxLayoutGap="8px"
        fxFlex="1 1 0%"
        routerLink="/todo/list/{{ todo?.id }}"
      >
        <span>{{ todo?.title }}</span>
        <span>{{ todo?.note }}</span>

        <!-- <div fxLayout="row" fxLayoutGap="5px">
          <div class="tag" *ngFor="let tag of todo?.tag">
            <div class="circle"></div>
            <div>{{ tagMap.size > 0 ? tagMap.get(tag) : null }}</div>
          </div>
        </div> -->

        <mat-chip-list #chipList>
          <div *ngFor="let tag of todo?.tag">
            <mat-chip *ngIf="tagMap.get(tag)">
              {{ tagMap.get(tag) }}
            </mat-chip>
          </div>
        </mat-chip-list>
      </div>

      <div fxFlexAlign="end center" fxLayout="row">
        <button mat-icon-button (click)="toggleImportant(todo)">
          <mat-icon
            [ngClass]="{
              'fill-color-warn': todo?.important
            }"
            >{{ todo?.important ? "error" : "error_outline" }}</mat-icon
          >
        </button>
        <button mat-icon-button (click)="toggleStar(todo)">
          <mat-icon
            [ngClass]="{
              'fill-color-accent': todo?.starred
            }"
            >{{ todo?.starred ? "star" : "star_outline" }}</mat-icon
          >
        </button>
        <div>
          <button mat-icon-button [matMenuTriggerFor]="menu2">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu2="matMenu" [xPosition]="'before'">
            <button mat-menu-item (click)="toggleRead(todo)">
              <mat-icon>{{
                todo.read ? "check_box" : "check_box_outline_blank"
              }}</mat-icon>
              <span style="vertical-align: middle;">{{
                todo.read ? "Mark as unread" : "Mark as read"
              }}</span>
            </button>
            <button mat-menu-item (click)="toggleDone(todo)">
              <mat-icon>{{
                todo.done ? "check_box" : "check_box_outline_blank"
              }}</mat-icon>
              <span style="vertical-align: middle;">{{
                todo.done ? "Mark as undone" : "Mark as done"
              }}</span>
            </button>
          </mat-menu>
        </div>
      </div>
    </div>
  </div>
</div>
