<!--
  ~ 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.
-->

<app-multi-func-input
  *ngIf="item.type === 'text' || item.type === 'string' || item.type === 'array'"
  [(value)]="value"
  (valueChange)="onChange($event)"
  [required]="item.required"
  [name]="item.field"
  [type]="item.type"
  [id]="item.field"
  [placeholder]="item.placeholder ? item.placeholder : ''"
  groupStyle="width: 100%"
/>

<textarea
  nz-input
  *ngIf="item.type === 'textarea'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [required]="item.required"
  [name]="item.field"
  [id]="item.field"
  [placeholder]="item.placeholder ? item.placeholder : ''"
  rows="8"
></textarea>

<app-multi-func-input
  *ngIf="item.type === 'password'"
  [placeholder]="item.placeholder ? item.placeholder : ''"
  [(value)]="value"
  (valueChange)="onChange($event)"
  [required]="item.required"
  [name]="item.field"
  [id]="item.field"
  groupStyle="width: 100%"
  type="password"
/>

<nz-input-number
  *ngIf="item.type === 'number'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [required]="item.required"
  [nzMin]="-1000"
  [nzMax]="65535"
  [nzStep]="1"
  [nzPlaceHolder]="item.placeholder ? item.placeholder : ''"
  [name]="item.field"
  [id]="item.field"
/>

<nz-switch
  *ngIf="item.type === 'boolean'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [required]="item.required"
  [name]="item.field"
  [id]="item.field"
/>

<nz-radio-group
  *ngIf="item.type === 'radio'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [required]="item.required"
  nzButtonStyle="solid"
  [name]="item.field"
  [id]="item.field"
>
  <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of item.options">
    {{ optionItem.label }}
  </label>
</nz-radio-group>

<app-configurable-field
  *ngIf="item.type === 'labels'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [configs]="[
    {
      key: 'key',
      required: true,
      separatorAfter: ':',
      placeholder: 'placeholder.key' | i18n
    },
    {
      key: 'value',
      required: true,
      placeholder: 'placeholder.value' | i18n
    }
  ]"
  [name]="item.field"
  [id]="item.field"
/>

<app-configurable-field
  *ngIf="item.type === 'key-value'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [configs]="[
    {
      key: 'key',
      required: true,
      placeholder: 'monitor.headerName.tip' | i18n
    },
    {
      key: 'value',
      required: true,
      placeholder: 'monitor.headerValue.tip' | i18n
    }
  ]"
  [name]="item.field"
  [id]="item.field"
/>

<app-configurable-field
  *ngIf="item.type === 'metrics-field'"
  [(ngModel)]="value"
  (ngModelChange)="onChange($event)"
  [configs]="[
    {
      key: 'field',
      required: true,
      placeholder: 'Field'
    },
    {
      key: 'unit',
      required: true,
      placeholder: 'Unit',
      style: 'flex: 0; flex-basis: min-content; min-width: 50px'
    },
    {
      key: 'type',
      required: true,
      placeholder: 'Type'
    }
  ]"
  [name]="item.field"
  [id]="item.field"
/>

<ng-container *ngIf="item.type === 'collectors-selection'">
  <nz-select
    [(ngModel)]="value"
    (ngModelChange)="onChange($event)"
    [nzDropdownMatchSelectWidth]="false"
    name="collector"
    id="collector"
    [nzCustomTemplate]="collectorTemplate"
  >
    <nz-option
      nzCustomContent
      [nzValue]="''"
      [nzLabel]="('monitor.collector.system.default' | i18n) + '-' + ('collector.mode.public' | i18n)"
    >
      <nz-tag nzColor="processing">{{ 'monitor.collector.system.default' | i18n }}</nz-tag>
      <nz-tag nzColor="success">{{ 'collector.mode.public' | i18n }}</nz-tag>
    </nz-option>
    <nz-option nzCustomContent *ngFor="let item of extra.collectors" [nzValue]="item.name" [nzLabel]="item.name">
      <nz-tag [nzColor]="item.status == 0 ? 'processing' : 'error'">{{
        item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n)
      }}</nz-tag>
      <span nz-icon nzType="bug" nzTheme="outline" style="margin-right: 8px"></span>
      <nz-tag nzColor="processing">{{ item.name }}</nz-tag>
      <nz-tag nzColor="processing">{{ item.ip }}</nz-tag>
      <nz-tag [nzColor]="item.mode == 'private' ? 'warning' : 'success'">
        {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }}
      </nz-tag>
    </nz-option>
  </nz-select>
  <ng-template #collectorTemplate let-selected>
    <nz-tag nzColor="processing">{{ selected.nzLabel }}</nz-tag>
  </ng-template>
</ng-container>

<ng-container *ngIf="item.type === 'intervals'">
  <nz-input-number
    [(ngModel)]="value"
    (ngModelChange)="onChange($event)"
    [nzMin]="extra.interval_type === 'push' ? 1 : 10"
    [nzMax]="604800"
    [nzStep]="extra.interval_type === 'push' ? 1 : 10"
    name="intervals"
    id="intervals"
  >
  </nz-input-number>
  <nz-tag style="margin-left: 6px">{{ 'common.time.unit.second' | i18n }}</nz-tag>
</ng-container>

<nz-textarea-count *ngIf="item.type === 'textarea-limit'" [nzMaxCharacterCount]="extra.textarea_limit || 100">
  <textarea
    [(ngModel)]="value"
    (ngModelChange)="onChange($event)"
    rows="3"
    nz-input
    [name]="item.field"
    [id]="item.field"
    [placeholder]="item.placeholder ? item.placeholder : ''"
  ></textarea>
</nz-textarea-count>

<ng-container *ngIf="item.type === 'label-selector'">
  <app-label-selector
    [(ngModel)]="value"
    (ngModelChange)="onChange($event)"
    [name]="item.field"
    [id]="item.field"
    [labelKeys]="extra.labelKeys"
    [labelMap]="extra.labelMap"
    [labelIsCustom]="extra.labelIsCustom"
  />
</ng-container>
