<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-modal-component
  [title]="data.title"
  [additionalTitle]="additionalTitle"
  [closeIcon]="!data.closeIconHidden"
  [optionalButtonAsPrimary]="data.outerLeftButtonTitle && data.primaryButton === PrimaryButton.OuterLeftButton"
  [optionalButtonTitle]="data.outerLeftButtonTitle"
  [optionalButtonDisabled]="data.outerLeftButtonDisabled"
  [closeOnBackdropClick]="data.closeIconHidden"
  (closeHandler)="close(AlertClosingType.CloseButton)"
  (optionalButtonHandler)="close(AlertClosingType.OuterLeftButton)"
>
  <ng-container fontIcon [ngSwitch]="data.type">
    <mat-icon *ngSwitchCase="AlertType.Info" class="icon" fontIcon="bosch-ic-alert-info"></mat-icon>
    <mat-icon *ngSwitchCase="AlertType.Success" class="icon" fontIcon="bosch-ic-alert-success"></mat-icon>
    <mat-icon *ngSwitchCase="AlertType.Warning" class="icon" fontIcon="bosch-ic-alert-warning"></mat-icon>
    <mat-icon *ngSwitchCase="AlertType.Error" class="icon" fontIcon="bosch-ic-alert-error"></mat-icon>
  </ng-container>
  <div *ngIf="data.description" data-test="alert-dialog-description">{{ data.description }}</div>
  <div *ngIf="data.infoText" class="infoText" data-test="alert-dialog-infoText">{{ data.infoText }}</div>

  <div actions>
    <!-- Left Button -->
    <button
      (click)="close(AlertClosingType.LeftButton)"
      *ngIf="data.leftButtonTitle && data.primaryButton !== PrimaryButton.LeftButton"
      [disabled]="data.leftButtonDisabled"
      bciSecondaryButton
      type="button"
      data-test="alert-dialog-left-button"
    >
      {{ data.leftButtonTitle }}
    </button>
    <button
      #leftBtnRaised
      (click)="close(AlertClosingType.LeftButton)"
      *ngIf="data.leftButtonTitle && data.primaryButton === PrimaryButton.LeftButton"
      [disabled]="data.leftButtonDisabled"
      bciPrimaryButton
      type="button"
      data-test="alert-dialog-left-button"
    >
      {{ data.leftButtonTitle }}
    </button>

    <!-- Right Button -->
    <button
      (click)="close(AlertClosingType.RightButton)"
      *ngIf="data.rightButtonTitle && data.primaryButton !== PrimaryButton.RightButton"
      [disabled]="data.rightButtonDisabled"
      bciSecondaryButton
      type="button"
      data-test="alert-dialog-right-button"
    >
      {{ data.rightButtonTitle }}
    </button>
    <button
      #rightBtnRaised
      (click)="close(AlertClosingType.RightButton)"
      *ngIf="data.rightButtonTitle && data.primaryButton === PrimaryButton.RightButton"
      [disabled]="data.rightButtonDisabled"
      bciPrimaryButton
      type="button"
      data-test="alert-dialog-right-button"
    >
      {{ data.rightButtonTitle }}
    </button>
  </div>
</bci-modal-component>
