<form class="custom-form bg-custom p-2 p-sm-3" [formGroup]="chartForm">
  <!-- TYPE -->
  <div class="form-group" [ngClass]="{ 'form-group-invalid': chartForm.get('chart_type').errors }">
    <label for="type" class="font-weight-bold">
      {{ 'Action.Choose' | translate }}
      {{ 'Chart.Type' | translate | lowercase }}
      <small> ({{ 'Validation.RequiredField' | translate | lowercase }}) </small>
    </label>

    <div class="row">
      <div class="col-4 col-md-2 pb-md-2 text-center" [ngClass]="{ 'pb-4': i < 3 }" *ngFor="let chart of chartTypes; let i = index">
        <div class="d-inline">
          <input
            type="radio"
            class="chart-type-radio"
            formControlName="chart_type"
            id="chart-type-{{ i }}"
            name="chart_type"
            [value]="chart"
            (change)="onChartTypeChange(chart)"
            [attr.aria-describedby]="'chart_type_required_error'"
            [attr.aria-invalid]="chartForm.get('chart_type').errors"
          />

          <!-- svg label -->
          <label attr.for="chart-type-{{ i }}" title="{{ 'Chart.' + (chart | titlecase) | translate }}" role="button">
            <svg class="icon d-inline-block" role="img" attr.aria-labelledby="chart-type-title-{{ i }}">
              <title id="chart-type-title-{{ i }}">
                {{ 'Chart.' + (chart | titlecase) | translate }}
              </title>
              <use attr.xlink:href="/assets/charts-sprite.svg#icon-chart-{{ chart }}"></use>
            </svg>
          </label>
        </div>
      </div>
    </div>

    <!-- chart_type - required error -->
    <p
      class="form-text text-danger small"
      id="chart_type_required_error"
      *ngIf="chartForm.get('chart_type').errors && chartForm.get('chart_type').touched"
      @toggleVertically
    >
      {{ 'Validation.VarRequired' | translate: { param: 'Chart.Type' | translate } }}
    </p>
  </div>

  <!-- LABELS - NON SCATTER -->
  <div class="form-group" *ngIf="!isScatterChart">
    <label for="labels" class="font-weight-bold">
      {{ 'Chart.XaxisFormLabel' | translate }}
      <small> ({{ 'Validation.RequiredField' | translate | lowercase }}) </small>
    </label>

    <select class="form-select" formControlName="labels" id="labels" (change)="onColumnChange()">
      <option [ngValue]="null">
        {{ 'Filters.Choose' | translate }}
      </option>
      <ng-container *ngFor="let column of nonNumericColumnList">
        <option [value]="column.name">
          {{ column.description }}
        </option>
      </ng-container>
    </select>

    <!-- labels - required error -->
    <p
      class="mb-0 pb-1 small form-text text-danger"
      id="labels_required_error"
      *ngIf="!chartForm.get('labels').valid && chartForm.get('labels').dirty"
      @toggleVertically
    >
      {{ 'Validation.VarRequired' | translate: { param: 'Chart.XaxisFormLabel' | translate } }}
    </p>
  </div>

  <!-- LABELS - SCATTER -->
  <div class="form-group" *ngIf="isScatterChart">
    <label for="labels" class="font-weight-bold">
      {{ 'Chart.XaxisFormLabelValue' | translate }}
      <small> ({{ 'Validation.RequiredField' | translate | lowercase }}) </small>
    </label>

    <select class="form-select" formControlName="labels" id="labels" (change)="onColumnChange()">
      <option [ngValue]="null">
        {{ 'Filters.Choose' | translate }}
      </option>
      <ng-container *ngFor="let column of numericColumnList">
        <option [value]="column.name">
          {{ column.description }}
        </option>
      </ng-container>
    </select>

    <!-- labels - required error -->
    <p
      class="mb-0 pb-1 small form-text text-danger"
      id="labels_required_error"
      *ngIf="!chartForm.get('labels').valid && chartForm.get('labels').dirty"
      @toggleVertically
    >
      {{ 'Validation.VarRequired' | translate: { param: 'Chart.XaxisFormLabelValue' | translate } }}
    </p>

    <!-- error message - labels/datasets - duplicated values -->
    <p
      class="mb-0 pb-1 form-text text-danger small"
      id="labels_value_exists_error"
      *ngIf="this.chartForm.errors && this.chartForm.errors['valueInArray']"
      @toggleVertically
    >
      {{ 'Chart.SelectedValueExists' | translate }}
    </p>
  </div>

  <!--  DATASETS COLUMNS -->
  <div
    class="form-group"
    [formArrayName]="'datasets'"
    [ngClass]="{ 'form-group-invalid': chartForm.get('datasets').errors && !chartForm.get('datasets').valid }"
  >
    <label id="y-axis" class="font-weight-bold">
      {{ 'Chart.YaxisFormLabel' | translate }}
      <small> ({{ 'Validation.RequiredField' | translate | lowercase }}) </small>
    </label>

    <div class="input-group pb-1" *ngFor="let d of chartForm.get('datasets')['controls']; let i = index" @toggleVertically>
      <!-- data column - y axis -->
      <select class="form-select" [formControlName]="i" id="dataset-{{ i }}" (change)="onColumnChange()">
        <option [ngValue]="null">
          {{ 'Filters.Choose' | translate }}
        </option>
        <ng-container *ngFor="let column of numericColumnList; let i = index">
          <option [value]="column.name">
            {{ column.description }}
          </option>
        </ng-container>
      </select>

      <!-- remove selected column -->
      <button
        type="button"
        class="btn btn-outline-danger"
        *ngIf="chartForm.get('datasets')['controls'].length > 1"
        (click)="onRemoveDataColumn(i)"
      >
        <span aria-hidden="true">x</span>
        <span class="visually-hidden">
          {{ 'Action.Remove' | translate }}
          {{ i }}
        </span>
      </button>
    </div>

    <!-- datasets - required error -->
    <p
      class="mb-0 pb-1 form-text text-danger small"
      id="datasets_required_error"
      *ngIf="!chartForm.get('datasets').errors && !chartForm.get('datasets').valid && chartForm.get('datasets').dirty"
      @toggleVertically
    >
      {{ 'Validation.VarRequired' | translate: { param: 'Chart.YaxisFormLabel' | translate } }}
    </p>

    <!-- datasets - duplicates error -->
    <p
      class="mb-0 pb-1 form-text text-danger small"
      id="datasets_duplicates_error"
      *ngIf="chartForm.get('datasets').errors && chartForm.get('datasets').errors['duplicatesInArray']"
      @toggleVertically
    >
      {{ 'Chart.DuplicatesEncountered' | translate }}
    </p>

    <!-- datasets - more then one value error -->
    <p
      class="mb-0 pb-1 form-text text-danger small"
      id="datasets_more_than_one_error"
      *ngIf="chartForm.get('datasets').errors && chartForm.get('datasets').errors['moreThanOneElementInArray']"
      @toggleVertically
    >
      {{ 'Chart.YaxisOnlyOneColumnAllowed' | translate }}
    </p>

    <!-- new data column handler -->
    <div *ngIf="!isCircularChart">
      <!-- for scatter -->
      <ng-container *ngIf="isScatterChart">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          (click)="onAppendDataColumn()"
          *ngIf="chartForm.get('datasets')['controls'].length < numericColumnList.length - 1"
        >
          {{ 'Chart.YaxisNewColumn' | translate }}
        </button>

        <!-- max numeric column reached -->
        <ng-container @toggleVertically *ngIf="chartForm.get('datasets')['controls'].length === numericColumnList.length - 1">
          <button
            type="button"
            class="btn btn-sm btn-outline-secondary"
            [attr.aria-disabled]="true"
            title="{{ 'Chart.MaxColumnReached' | translate }}"
          >
            {{ 'Chart.YaxisNewColumn' | translate }}
          </button>
        </ng-container>
      </ng-container>

      <!-- not scatter -->
      <ng-container *ngIf="!isScatterChart">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          (click)="onAppendDataColumn()"
          *ngIf="chartForm.get('datasets')['controls'].length < numericColumnList.length"
        >
          {{ 'Chart.YaxisNewColumn' | translate }}
        </button>

        <!-- max numeric column reached -->
        <ng-container @toggleVertically *ngIf="chartForm.get('datasets')['controls'].length === numericColumnList.length">
          <button
            type="button"
            class="btn btn-sm btn-outline-secondary"
            [attr.aria-disabled]="true"
            title="{{ 'Chart.MaxColumnReached' | translate }}"
          >
            {{ 'Chart.YaxisNewColumn' | translate }}
          </button>
        </ng-container>
      </ng-container>
    </div>

    <!-- new data column handler - circular -->
    <button
      type="button"
      class="btn btn-sm btn-outline-secondary"
      [attr.aria-disabled]="true"
      title="{{ 'Chart.YaxisNewColumnStatus' | translate }}"
      *ngIf="isCircularChart"
    >
      {{ 'Chart.YaxisNewColumn' | translate }}
    </button>
  </div>

  <!-- SORT -->
  <div class="form-group" *ngIf="!isCircularChart && allSelectedColumns?.length" @toggleVertically>
    <label for="sort" class="font-weight-bold">
      {{ 'Sort.By' | translate }}
    </label>

    <select class="form-control" formControlName="sort" id="sort">
      <option [ngValue]="null">
        {{ 'Filters.Choose' | translate }}
      </option>

      <ng-container *ngFor="let column of allSelectedColumns; let i = index">
        <option [value]="column.name">{{ column.description }} - {{ 'Sort.Ascending' | translate | lowercase }}</option>
        <option [value]="'-' + column.name">{{ column.description }} - {{ 'Sort.Descending' | translate | lowercase }}</option>
      </ng-container>
    </select>
  </div>

  <!-- before save message -->
  <p class="alert alert-warning" aria-live="polite" *ngIf="!isEmbeddedView && !isUserLoggedIn && chartBlueprint" @toggleVertically>
    {{ 'Chart.BeforeSaveMessage' | translate }}
    <a [routerLink]="['/' | localize, 'user', 'register']">
      {{ 'Action.Register' | translate | lowercase }}
    </a>
    {{ 'Connector.Or' | translate | lowercase }}
    <a [routerLink]="['/' | localize, 'user', 'login']" [queryParams]="{ redirect: currentChartUrl }">
      {{ 'Action.Login' | translate | lowercase }} </a
    >.
  </p>

  <!-- SUBMIT -->
  <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
    <div
      appInfoTooltip="{{ 'Tour.Tooltip.DataResource.ShowChart.text' | translate }}"
      tooltipTitle="{{ 'Tour.Tooltip.DataResource.ShowChart.title' | translate }}"
    >
      <!-- Preview -->
      <button class="btn btn-primary" type="button" *ngIf="chartForm.valid" (click)="onPreviewChart()">
        {{ 'Action.Preview' | translate }}
        {{ 'Chart.Self' | translate | lowercase }}
      </button>

      <!-- fake Preview -->
      <button
        class="btn btn-secondary"
        type="button"
        aria-describedby="backend_notifications chart_type_required_error datasets_required_error datasets_duplicates_error datasets_more_than_one_error labels_required_error labels_value_exists_error"
        *ngIf="!chartForm.valid"
        [attr.aria-disabled]="true"
      >
        {{ 'Action.Preview' | translate }}
        {{ 'Chart.Self' | translate | lowercase }}
      </button>
    </div>

    <!-- SAVE & DELETE -->
    <span class="ml-0 ml-md-auto mt-1 mt-sm-0">
      <!-- NAMED CHART MODE -->
      <ng-container *ngIf="isNamedChartMode">
        <!-- toggle name form -->
        <span
          appInfoTooltip="{{ 'Tour.Tooltip.DataResource.SaveChart.text' | translate }}"
          tooltipTitle="{{ 'Tour.Tooltip.DataResource.SaveChart.title' | translate }}"
        >
          <!-- Save -->
          <button
            type="button"
            class="btn btn-primary"
            *ngIf="isSaveAvailable"
            attr.aria-controls="chart-name-form-wrapper"
            [attr.aria-pressed]="isNameFormVisible"
            (click)="isNameFormVisible = !isNameFormVisible"
          >
            {{ 'Action.Remember' | translate }}
            {{ 'Chart.Self' | translate | lowercase }}
          </button>

          <!-- fake Save -->
          <button type="button" class="btn btn-secondary" *ngIf="!isSaveAvailable" [attr.aria-disabled]="true">
            {{ 'Action.Remember' | translate }}
            {{ 'Chart.Self' | translate | lowercase }}
          </button>
        </span>

        <!-- Revoke chart settings -->
        <button type="button" class="btn btn-outline-danger ml-1" *ngIf="savedChartId && isSaveAvailable" (click)="onRevokeChartSettings()">
          Przywróć parametry wykresu
        </button>
        <button type="button" class="btn btn-outline-secondary ml-1" *ngIf="!savedChartId || !isSaveAvailable">
          Przywróć parametry wykresu
        </button>
      </ng-container>

      <!-- NOT NAMED CHART MODE -->
      <ng-container *ngIf="!isNamedChartMode">
        <!-- save form action -->
        <span
          appInfoTooltip="{{ 'Tour.Tooltip.DataResource.SaveChart.text' | translate }}"
          tooltipTitle="{{ 'Tour.Tooltip.DataResource.SaveChart.title' | translate }}"
        >
          <!-- Save -->
          <button type="button" class="btn btn-primary" *ngIf="isSaveAvailable" (click)="onSaveChart()">
            {{ 'Action.Remember' | translate }}
            {{ 'Chart.Self' | translate | lowercase }}
          </button>

          <!-- fake Save -->
          <button type="button" class="btn btn-secondary" *ngIf="!isSaveAvailable" [attr.aria-disabled]="true">
            {{ 'Action.Remember' | translate }}
            {{ 'Chart.Self' | translate | lowercase }}
          </button>
        </span>

        <!-- Delete -->
        <button type="button" class="btn btn-outline-danger ml-1" *ngIf="savedChartId" (click)="onDeleteChart()">
          {{ 'Action.Remove' | translate }}
          {{ 'Chart.Self' | translate | lowercase }}
        </button>

        <!-- fake Delete -->
        <button type="button" class="btn btn-outline-secondary ml-1" *ngIf="!savedChartId" [attr.aria-disabled]="true">
          {{ 'Action.Remove' | translate }}
          {{ 'Chart.Self' | translate | lowercase }}
        </button>
      </ng-container>
    </span>
  </div>

  <!-- Save Name Form -->
  <div id="chart-name-form-wrapper" *ngIf="isNameFormVisible" @toggleVertically>
    <app-resource-chart-name-form [name]="savedChartName" (formSaved)="onChartNameSaved($event)"> </app-resource-chart-name-form>
  </div>
</form>
