<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="bar" [class.simple]="looknfeel !== 'default'">
  <div class="title" role="heading" aria-level="1" data-testid="notebook-title">
    <zeppelin-elastic-input
      nz-tooltip
      [nzTooltipTitle]="note.path"
      [readonly]="revisionView"
      [value]="note.name"
      (valueUpdate)="updateNoteName($event)"
    ></zeppelin-elastic-input>
  </div>
  <div class="control">
    <nz-button-group nzSize="small">
      <button
        nz-button
        nz-popconfirm
        nzPopconfirmTitle="Run all paragraphs?"
        nz-tooltip
        nzTooltipTitle="Run all paragraphs"
        (nzOnConfirm)="runAllParagraphs()"
        [disabled]="revisionView || isNoteParagraphRunning"
      >
        <i nz-icon nzType="play-circle" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Show/hide the code"
        (click)="toggleAllEditor()"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
      >
        <i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Show/hide the output"
        (click)="toggleAllTable()"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
      >
        <i nz-icon [nzType]="tableHide ? 'book' : 'read'" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-popconfirm
        nzPopconfirmTitle="Do you want to clear all output?"
        nz-tooltip
        nzTooltipTitle="Clear all output"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
        (nzOnConfirm)="clearAllParagraphOutput()"
      >
        <i nz-icon nzType="fire" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Clone this note"
        (click)="cloneNote()"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
      >
        <i nz-icon nzType="copy" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Export this note"
        (click)="exportNote()"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
      >
        <i nz-icon nzType="download" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Reload from note file"
        (click)="reloadNote()"
        *ngIf="!viewOnly"
        [disabled]="revisionView"
      >
        <i nz-icon nzType="reload" nzTheme="outline"></i>
      </button>
      <ng-container *ngIf="principal && principal !== 'anonymous' && !viewOnly">
        <ng-container [ngSwitch]="note.config.personalizedMode">
          <button
            *ngSwitchCase="'true'"
            nz-tooltip
            nzTooltipTitle="Switch to collaboration mode"
            [disabled]="revisionView || !isOwner || isNoteParagraphRunning"
            nz-button
            nzType="primary"
            (click)="toggleNotePersonalizedMode()"
          >
            <i nz-icon nzType="user" nzTheme="outline"></i>
          </button>
          <button
            *ngSwitchDefault
            nz-tooltip
            nzTooltipTitle="Switch to personal mode"
            nz-button
            [disabled]="revisionView || !isOwner || isNoteParagraphRunning"
            (click)="toggleNotePersonalizedMode()"
          >
            <i nz-icon nzType="team" nzTheme="outline"></i>
          </button>
        </ng-container>
      </ng-container>
    </nz-button-group>
    <nz-button-group nzSize="small" *ngIf="isRevisionSupported">
      <button
        nz-button
        nz-popover
        *ngIf="!viewOnly"
        [disabled]="revisionView"
        [(nzPopoverVisible)]="commitVisible"
        [nzPopoverPlacement]="'right'"
        [nzPopoverContent]="commitTpl"
        nzPopoverTrigger="click"
      >
        <i nz-icon nzType="to-top" nzTheme="outline"></i>
      </button>
      <ng-template #commitTpl>
        <nz-input-group nzSearch nzSize="small" [nzAddOnAfter]="suffixButton">
          <input nzSize="small" autofocus nz-input #inputElement placeholder="commit message" />
        </nz-input-group>
        <ng-template #suffixButton>
          <button nz-button nzSize="small" nzType="primary" (click)="checkpointNote(inputElement.value, $event)">
            commit
          </button>
        </ng-template>
      </ng-template>
      <button
        nz-button
        nz-tooltip
        *ngIf="!viewOnly"
        [disabled]="!revisionView"
        nzTooltipTitle="Set revision"
        (click)="setNoteRevision()"
      >
        <i nz-icon nzType="rollback" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-tooltip
        nzTooltipTitle="Compare revisions"
        [nzType]="activatedExtension === 'revisions' ? 'primary' : 'default'"
        (click)="toggleExtension('revisions')"
      >
        <i nz-icon nzType="swap" nzTheme="outline"></i>
      </button>
      <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" nzTrigger="click">
        {{ currentRevision }}
      </button>
      <nz-dropdown-menu #revisionsMenu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item *ngFor="let r of noteRevisions" (click)="visitRevision(r)">
            <strong>{{ r.message }}</strong>
            <nz-divider nzType="vertical"></nz-divider>
            <em class="font-sm opacity-05">
              {{ r.time === undefined ? 'Current' : (r.time * 1000 | date: 'MMMM dd yyyy, h:mm:ss a') }}
            </em>
          </li>
        </ul>
      </nz-dropdown-menu>
    </nz-button-group>
    <nz-button-group nzSize="small">
      <button
        nz-button
        nz-dropdown
        [(nzVisible)]="isSearchMenuVisible"
        [nzDropdownMenu]="searchMenu"
        nzTrigger="click"
        nz-tooltip
        nzTooltipTitle="Search code"
        nzTooltipTrigger="hover"
        (nzVisibleChange)="onSearchMenuOpenChange($event)"
      >
        <i nz-icon nzType="search" nzTheme="outline"></i>
      </button>
      <!-- Search Code Dropdown UI -->
      <nz-dropdown-menu #searchMenu="nzDropdownMenu">
        <div class="dropdown-menu search-code">
          <div class="search-code-row">
            <nz-input-group nzAddOnBefore="Find">
              <input type="text" nz-input #searchInput [(ngModel)]="searchText" (ngModelChange)="searchCode()" />
            </nz-input-group>
            <nz-button-group class="search-row-btn-group">
              <button nz-button (click)="onFindPrevClick(searchText)"><i nz-icon nzType="left"></i></button>
              <button nz-button (click)="onFindNextClick(searchText)"><i nz-icon nzType="right"></i></button>
            </nz-button-group>
          </div>
          <div class="search-code-row">
            <nz-input-group nzAddOnBefore="Replace">
              <input type="text" nz-input [(ngModel)]="replaceText" />
            </nz-input-group>
            <nz-button-group class="search-row-btn-group">
              <button nz-button (click)="onReplaceClick(searchText, replaceText)">Replace</button>
              <button nz-button (click)="onReplaceAllClick(searchText, replaceText)">All</button>
            </nz-button-group>
          </div>
        </div>
      </nz-dropdown-menu>
    </nz-button-group>
    <nz-button-group nzSize="small" *ngIf="!viewOnly">
      <button
        nz-button
        nz-popconfirm
        nzPopconfirmTitle="Remove this note permanently?"
        *ngIf="isTrash"
        [disabled]="isNoteParagraphRunning"
        (nzOnConfirm)="deleteNote()"
      >
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </button>
      <button
        nz-button
        nz-popconfirm
        nzPopconfirmTitle="Move this note to trash?"
        *ngIf="!isTrash"
        [disabled]="isNoteParagraphRunning"
        (nzOnConfirm)="moveNoteToTrash()"
      >
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </button>
    </nz-button-group>
    <nz-button-group nzSize="small" *ngIf="collaborativeMode">
      <button
        nz-button
        nz-tooltip
        [nzType]="collaborativeModeUsers.length ? 'primary' : 'default'"
        [nzTooltipTitle]="'Users who watch this note:' + collaborativeModeUsers.join(', ')"
      >
        <i nz-icon nzType="eye" nzTheme="outline"></i>
        {{ collaborativeModeUsers.length }}
      </button>
    </nz-button-group>
    <nz-button-group nzSize="small" *ngIf="note.config.isZeppelinNotebookCronEnable && !viewOnly">
      <button
        nz-button
        nz-dropdown
        nz-tooltip
        nzSize="small"
        nzTooltipTitle="Run scheduler"
        nzTrigger="click"
        [nzDropdownMenu]="menu"
        [disabled]="isTrash || revisionView"
        [nzType]="note.config.cron ? 'primary' : 'default'"
        [nzDanger]="!note.config.cron && note.info.cron"
      >
        <i nz-icon nzType="clock-circle" nzTheme="outline"></i>
        {{ getCronOptionNameFromValue }}
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <div class="ant-dropdown-menu padding-sm scheduler">
          Run note with cron scheduler. Either choose from preset or write your own
          <a
            href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html"
            target="_blank"
          >
            cron expression
          </a>
          .
          <div>
            <span>- Preset</span>
            <a
              class="cron-preset"
              [class.selected]="cr.value === note.config.cron"
              *ngFor="let cr of cronOption"
              (click)="setCronScheduler(cr.value)"
            >
              {{ cr.name }}
            </a>
          </div>
          <div>
            <span>- Preset</span>
            <input nz-input nzSize="small" [(ngModel)]="note.config.cron" />
            <p *ngIf="note.info.cron">
              {{ note.info.cron }}
            </p>
          </div>
          <div>
            <label nz-checkbox [ngModel]="note.config.releaseresource" (ngModelChange)="setReleaseResource($event)">
              After execution stop the interpreter
            </label>
          </div>
        </div>
      </nz-dropdown-menu>
    </nz-button-group>
  </div>
  <div class="setting">
    <nz-button-group nzSize="small">
      <button nz-button nzNoAnimation *ngIf="!revisionView" (click)="showShortCut()">
        <i nz-icon nzType="info-circle" nzTheme="outline"></i>
      </button>
      <button nz-button nzNoAnimation *ngIf="!revisionView" (click)="toggleExtension('interpreter')">
        <i nz-icon nzType="setting" [nzTheme]="activatedExtension === 'interpreter' ? 'fill' : 'outline'"></i>
      </button>
      <button nz-button nzNoAnimation (click)="togglePermissions()">
        <i nz-icon nzType="lock" [nzTheme]="activatedExtension === 'permissions' ? 'fill' : 'outline'"></i>
      </button>
      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" nz-dropdown nzTrigger="click">
        {{ note.config.looknfeel }}
        <i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item *ngFor="let lf of lfOption" (click)="setLookAndFeel(lf)">{{ lf }}</li>
        </ul>
      </nz-dropdown-menu>
    </nz-button-group>
  </div>
</div>
