<div class="action-bar">
  <!-- Slot for controls the parent wants to scroll together with these actions
       (e.g. the add-to-top/bottom and search toggles on the create-mode bar). -->
  <ng-content></ng-content>

  <button
    #projectMenuTrigger
    mat-button
    class="action-btn"
    [matMenuTriggerFor]="projectMenu"
    [class.has-value]="selectedProject()"
    [class.auto-detected]="isAutoDetected() && !!selectedProject()"
    [class.menu-open]="isProjectMenuOpen()"
    (click)="onProjectMenuClick()"
  >
    @if (isProjectEmojiIcon()) {
      <span
        class="project-icon-emoji"
        [style.color]="selectedProject()?.theme?.primary"
      >
        {{ selectedProject()?.icon || DEFAULT_PROJECT_ICON }}
      </span>
    } @else {
      <mat-icon [style.color]="selectedProject()?.theme?.primary">
        {{ selectedProject()?.icon || DEFAULT_PROJECT_ICON }}
      </mat-icon>
    }
    @if (isDefaultInboxProject(selectedProject())) {
      <span>{{ T.G.INBOX_PROJECT_TITLE | translate }}</span>
    } @else {
      <span>{{ selectedProject()?.title }}</span>
    }
  </button>

  @if (!isHideDueBtn()) {
    <button
      mat-button
      class="action-btn"
      data-test="add-task-bar-due-btn"
      (click)="openScheduleDialog()"
      [class.has-value]="state().date"
    >
      <mat-icon>{{ state().time ? 'schedule' : 'event' }}</mat-icon>
      <span>{{ dateDisplay() || (T.F.TASK.ADD_TASK_BAR.DUE_BUTTON | translate) }}</span>
    </button>

    @if (state().date) {
      <button
        mat-button
        class="clear-btn"
        data-test="add-task-bar-clear-due-btn"
        (click)="clearDateWithSyntax(); $event.stopPropagation()"
        [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOOLTIP_CLEAR_DATE | translate"
        matTooltipPosition="above"
      >
        <mat-icon>close</mat-icon>
      </button>
    }
  }

  @if (state().deadlineDate) {
    <button
      mat-button
      class="action-btn deadline-chip"
      data-test="add-task-bar-deadline-btn"
      (click)="openDeadlineDialog()"
      [class.has-value]="true"
    >
      <mat-icon>{{ state().deadlineTime ? 'alarm' : 'flag' }}</mat-icon>
      <span>{{ deadlineDateDisplay() }}</span>
    </button>

    <button
      mat-button
      class="clear-btn"
      data-test="add-task-bar-clear-deadline-btn"
      (click)="clearDeadlineWithSyntax(); $event.stopPropagation()"
      [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOOLTIP_CLEAR_DEADLINE | translate"
      matTooltipPosition="above"
    >
      <mat-icon>close</mat-icon>
    </button>
  }

  @if (!isHideTagBtn() && allTags().length) {
    <button
      #tagsMenuTrigger
      mat-button
      class="action-btn"
      [class.tags-mode]="hasTagsSelected() || state().newTagTitles.length > 0"
      [matMenuTriggerFor]="tagsMenu"
      [class.has-value]="hasTagsSelected() || hasNewTags()"
      [class.has-new-tags]="hasNewTags()"
      [class.menu-open]="isTagsMenuOpen()"
      (click)="onTagsMenuClick()"
    >
      <!-- NOTE: we do it this way, since mat-button puts it inside the label otherwise leading to vertical alignment issues -->
      <mat-icon [class.hide]="hasTagsSelected() || state().newTagTitles.length > 0"
        >label</mat-icon
      >

      @if (!hasTagsSelected() && state().newTagTitles.length === 0) {
        <ng-container>
          <span>{{ T.F.TASK.ADD_TASK_BAR.TAGS_BUTTON | translate }}</span>
        </ng-container>
      } @else {
        <div class="tags-display">
          @for (tag of selectedTags(); track tag.id) {
            <div class="tag-item">
              <mat-icon [style.color]="tag.color || tag.theme?.primary">
                {{ tag.icon || 'label' }}
              </mat-icon>
              <span class="tag-title">{{ tag.title }}</span>
            </div>
          }
          @for (newTag of state().newTagTitles; track newTag) {
            <div class="tag-item new-tag">
              <mat-icon>new_releases</mat-icon>
              <span class="tag-title">{{ newTag }}</span>
            </div>
          }
        </div>
      }
    </button>

    @if (hasTagsSelected() || hasNewTags()) {
      <button
        mat-button
        class="clear-btn"
        (click)="clearTagsWithSyntax(); $event.stopPropagation()"
        [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOOLTIP_CLEAR_TAGS | translate"
        matTooltipPosition="above"
      >
        <mat-icon>close</mat-icon>
      </button>
    }
  }

  <button
    #estimateMenuTrigger
    mat-button
    class="action-btn estimate-btn"
    [matMenuTriggerFor]="estimateMenu"
    [class.has-value]="state().estimate"
    [class.menu-open]="isEstimateMenuOpen()"
    (click)="onEstimateMenuClick()"
  >
    <mat-icon>hourglass_empty</mat-icon>
    <span>{{
      estimateDisplay() || (T.F.TASK.ADD_TASK_BAR.ESTIMATE_BUTTON | translate)
    }}</span>
  </button>

  @if (state().estimate) {
    <button
      mat-button
      class="clear-btn"
      (click)="clearEstimateWithSyntax(); $event.stopPropagation()"
      [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOOLTIP_CLEAR_ESTIMATE | translate"
      matTooltipPosition="above"
    >
      <mat-icon>close</mat-icon>
    </button>
  }

  <button
    #repeatMenuTrigger
    mat-button
    class="action-btn"
    data-test="add-task-bar-repeat-btn"
    [matMenuTriggerFor]="repeatMenu"
    [class.has-value]="state().repeatQuickSetting"
    [class.menu-open]="isRepeatMenuOpen()"
    (click)="onRepeatMenuClick()"
  >
    <mat-icon class="repeat-icon">repeat</mat-icon>
    <span>{{
      repeatDisplay() || (T.F.TASK.ADD_TASK_BAR.REPEAT_BUTTON | translate)
    }}</span>
  </button>

  @if (state().repeatQuickSetting) {
    <button
      mat-button
      class="clear-btn"
      data-test="add-task-bar-clear-repeat-btn"
      (click)="clearRepeatSetting(); $event.stopPropagation()"
      [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOOLTIP_CLEAR_REPEAT | translate"
      matTooltipPosition="above"
    >
      <mat-icon>close</mat-icon>
    </button>
  }
</div>

<!-------------- Menus ------------------->
<mat-menu #projectMenu="matMenu">
  @for (project of allProjects(); track project.id) {
    <button
      mat-menu-item
      (click)="stateService.updateProjectId(project.id)"
    >
      <select-option-row
        [title]="
          isDefaultInboxProject(project)
            ? (T.G.INBOX_PROJECT_TITLE | translate)
            : project.title
        "
        [icon]="project.icon"
        [defaultIcon]="DEFAULT_PROJECT_ICON"
        [color]="project.theme?.primary"
        [folderPath]="projectFolderMap().get(project.id)"
      ></select-option-row>
    </button>
  }
</mat-menu>

<mat-menu #tagsMenu="matMenu">
  <div (click)="$event.stopPropagation()">
    @for (tag of allTags(); track tag.id) {
      <button
        mat-menu-item
        (click)="toggleTagWithSyntax(tag)"
        [class.selected]="hasSelectedTag(tag.id)"
      >
        <select-option-row
          [title]="tag.title"
          [icon]="tag.icon"
          defaultIcon="label"
          [color]="tag.color || tag.theme?.primary"
          [isSelected]="hasSelectedTag(tag.id)"
          [showCheckbox]="true"
          [folderPath]="tagFolderMap().get(tag.id)"
        ></select-option-row>
      </button>
    }
  </div>
</mat-menu>

<mat-menu #estimateMenu="matMenu">
  @for (option of ESTIMATE_OPTIONS; track option.value) {
    <button
      mat-menu-item
      (click)="onEstimateInput(option.value)"
    >
      {{ option.label }}
    </button>
  }
</mat-menu>

<mat-menu #repeatMenu="matMenu">
  @for (option of repeatQuickOptions(); track option.value) {
    <button
      mat-menu-item
      (click)="selectRepeatQuickSetting(option.value)"
    >
      @if (option.value === 'CUSTOM') {
        <mat-icon>tune</mat-icon>
      } @else {
        <mat-icon>repeat</mat-icon>
      }
      {{ option.label }}
    </button>
  }
</mat-menu>
