<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you 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="base-retreat configuration">
  <div class="sub-nav">
    <div class="selection">
      <ng-template [ngIf]="endpoints?.length > 1">
        <label class="label">Selected endpoint </label>
        <div class="mat-reset">
          <div class="control selector-wrapper">
            <mat-form-field [ngClass]="{ 'not-active' : services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged }">
              <mat-label>Select endpoint</mat-label>
                <mat-select 
                  disableOptionCentering 
                  [(value)]="activeEndpoint" 
                  panelClass="top-select scrolling" 
                  [disabled]="services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged">
                  <mat-option 
                    *ngFor="let endpoint of endpoints" 
                    [value]="endpoint.name" 
                    [disabled]="endpoint.status !== 'ACTIVE'"
                    (click)="setActiveEndpoint(endpoint.name)">
                    {{ endpoint.name === 'local' ? endpoint.name : endpoint.name + ' (external endpoint)'}}{{endpoint.status !== 'ACTIVE' ? ', inactive' : ''}}
                  </mat-option>
                </mat-select>
              <button class="caret">
                <i class="material-icons">keyboard_arrow_down</i>
              </button>
            </mat-form-field>
          </div>
        </div>
      </ng-template>
    </div>
    <div>
      <ng-template [ngIf]="activeTab.index !== 0">
        <button 
          mat-raised-button class="butt"
          (click)="action('save')"
          [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
        >
          Save
        </button>
        <button 
          mat-raised-button class="butt"
          (click)="action('discard')"
          [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
        >
          Discard changes
        </button>
      </ng-template>
      <button
        mat-raised-button type="button"
        class="butt action"
        (click)="restartServices()"
        [disabled]="isServiceSelected()"
      >
        Restart
      </button>
      <button 
        mat-raised-button 
        class="butt" 
        (click)="refreshConfig()"
      >
        <i class="material-icons refresh-icon">autorenew</i>Refresh
      </button>
    </div>
  </div>
  <mat-divider></mat-divider>
  <div class="configuration-wrapper">
    <mat-tab-group 
      animationDuration="0.5ms" 
      (selectedTabChange)="tabChanged($event)" 
      [selectedIndex]="activeTab.index"
    >
      <mat-tab 
        label="Main"
        [disabled]="!(!services['provisioning'].isConfigChanged && 
                      !services['self-service'].isConfigChanged && 
                      !services['billing'].isConfigChanged) && 
                      activeTab.index !== 0"
      >
        <h4>Main settings</h4>
        <div class="main-wrapper">
          <section class="section">
            <p class="section-title">Restart services</p>
            <div class="section-content">
              <ul class="list-menu selection-list">
                <li *ngFor="let service of services | keys">
                  <p 
                    *ngIf="(activeEndpoint !== 'local' 
                          && (service.key === 'provisioning' || service.key === 'billing') 
                          || activeEndpoint === 'local')"
                    class="list-item" 
                    role="menuitem" 
                  >
                    <span (click)="toggleSettings(service.key);$event.stopPropagation()" class="d-flex">
                      <div class="checkbox-wrap">
                        <datalab-checkbox
                          [checked]="services[service.key].selected"
                          (toggleSelection)="toggleSettings(service.key)"
                        ></datalab-checkbox>
                      </div>
                      {{service.value.label}}
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </section>
        </div>
      </mat-tab>

      <mat-tab 
        label="Self-service"
        *ngIf="activeEndpoint === 'local'"
        [disabled]="!(!services['provisioning'].isConfigChanged 
                  && !services['self-service'].isConfigChanged 
                  && !services['billing'].isConfigChanged) 
                  && activeTab.index !== 1"
      >
        <h4>Edit self-service.yml</h4>
        <div class="editor-wrap">
          <div 
            #selfEditor 
            ace-editor 
            mode="yaml" 
            [(text)]="services['self-service'].config" 
            [autoUpdateContent]="true" 
            (textChange)="configUpdate('self-service')"
          ></div>
        </div>
      </mat-tab>

      <mat-tab 
        label="Provisioning"
        [disabled]="!(!services['provisioning'].isConfigChanged
                  && !services['self-service'].isConfigChanged
                  && !services['billing'].isConfigChanged)
                  && activeTab.index !== 2"
      >
        <h4>Edit provisioning.yml</h4>
        <div class="editor-wrap">
          <div 
            #provEditor 
            ace-editor 
            mode="yaml" 
            [(text)]="services['provisioning'].config" 
            [autoUpdateContent]="true" 
            (textChange)="configUpdate('provisioning')"
          ></div>
        </div>
      </mat-tab>

      <mat-tab 
        label="Billing"
        [disabled]="!(!services['provisioning'].isConfigChanged 
                  && !services['self-service'].isConfigChanged 
                  && !services['billing'].isConfigChanged) 
                  && activeTab.index !== 3"
      >
        <h4>Edit billing.yml</h4>
        <div class="editor-wrap">
          <div 
            #billingEditor 
            ace-editor 
            mode="yaml" 
            [(text)]="services['billing'].config" 
            [autoUpdateContent]="true" 
            (textChange)="configUpdate('billing')"
          ></div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>