<ion-header>
  <ion-toolbar [color]="env.colorTheme === 'black'? 'black' : 'dark'">
    <ion-buttons slot="start">
      <ion-back-button text="" defaultHref="tabs/setting">
      </ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'QR_CODE_STYLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<div class="top-qr-preview">
  <ion-accordion-group value="preview">
    <ion-accordion value="preview">
      <ion-item [ngClass]="isAndroid? ['ion-no-padding', 'ion-margin-end'] : 'ion-no-padding'" lines="none"
        slot="header" style="--ripple-color: transparent;">
        <ion-list-header class="ion-padding-start ion-margin-start align-items-center" style="font-size: large;">
          {{ 'PREVIEW' | translate }}
        </ion-list-header>
      </ion-item>
      <div class="d-flex align-items-center justify-content-top flex-column ion-padding-bottom" slot="content">
        <ion-row class="ion-padding-vertical">
          <ion-col class="ion-text-center" style="max-width: 100% !important;">
            <ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
              [errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
              [margin]="env.qrCodeMargin" #qrcode>
            </ngx-qrcode>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="ion-text-center">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'">
              {{ qrCodeContent }}
            </ion-text>
          </ion-col>
        </ion-row>
      </div>
    </ion-accordion>
  </ion-accordion-group>
</div>

<ion-content>

  <div class="ion-padding-bottom">
    <ion-accordion-group>
      <ion-accordion>
        <ion-item [ngClass]="isAndroid? ['ion-no-padding', 'ion-margin-end'] : 'ion-no-padding'" lines="none"
          slot="header" style="--ripple-color: transparent;">
          <ion-list-header class="ion-padding-start ion-margin-start align-items-center" style="font-size: large;">
            {{ 'ERROR_CORRECTION_LEVEL' | translate }}
          </ion-list-header>
        </ion-item>
        <ion-item class="ion-no-padding" lines="none" slot="content">
          <ion-label class="ion-padding-start">
            <p class="ion-padding-horizontal">
              <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
                <div [innerHTML]="'MSG.ERROR_CORRECTION_LEVEL_EXPLAIN' | translate">
                </div>
              </ion-text>
            </p>
          </ion-label>
        </ion-item>
      </ion-accordion>
    </ion-accordion-group>
    <ion-radio-group [(ngModel)]="env.errorCorrectionLevel" (ionChange)="saveErrorCorrectionLevel()">
      <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
        <ion-label class="ion-padding-start">
          <p class="ion-padding-horizontal pre-line">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
              {{ 'LEVEL_L' | translate }}
            </ion-text>
          </p>
        </ion-label>
        <ion-radio class="ion-margin-end" slot="end" [value]="'L'" [color]="'primary'">
        </ion-radio>
      </ion-item>
      <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
        <ion-label class="ion-padding-start">
          <p class="ion-padding-horizontal pre-line">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
              {{ 'LEVEL_M' | translate }}
            </ion-text>
          </p>
        </ion-label>
        <ion-radio class="ion-margin-end" slot="end" [value]="'M'" [color]="'primary'">
        </ion-radio>
      </ion-item>
      <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
        <ion-label class="ion-padding-start">
          <p class="ion-padding-horizontal pre-line">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
              {{ 'LEVEL_Q' | translate }}
            </ion-text>
          </p>
        </ion-label>
        <ion-radio class="ion-margin-end" slot="end" [value]="'Q'" [color]="'primary'">
        </ion-radio>
      </ion-item>
      <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
        <ion-label class="ion-padding-start">
          <p class="ion-padding-horizontal pre-line">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
              {{ 'LEVEL_H' | translate }}
            </ion-text>
          </p>
        </ion-label>
        <ion-radio class="ion-margin-end" slot="end" [value]="'H'" [color]="'primary'">
        </ion-radio>
      </ion-item>
    </ion-radio-group>
  </div>

  <div class="ion-padding-bottom">
    <ion-list-header class="ion-margin-start ion-padding-horizontal" mode="md" style="font-size: large;"
      (click)="colorLocked = !colorLocked">
      <div class="d-flex justify-content-between align-items-center ion-margin-end ion-padding-end"
        style="width: 100%;">
        <span>
          {{ 'COLOR' | translate }}
        </span>
        <ion-icon *ngIf="colorLocked" name="lock-closed" [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
        <ion-icon *ngIf="!colorLocked" name="lock-open" [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
      </div>
    </ion-list-header>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeDarkR"
        color="red" (ionChange)="saveQrCodeDarkR()" [disabled]="colorLocked">
        <ion-label slot="start">R</ion-label>
        <ion-label slot="end">{{ env.qrCodeDarkR }}</ion-label>
      </ion-range>
    </ion-item>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeDarkG"
        color="green" (ionChange)="saveQrCodeDarkG()" [disabled]="colorLocked">
        <ion-label slot="start">G</ion-label>
        <ion-label slot="end">{{ env.qrCodeDarkG }}</ion-label>
      </ion-range>
    </ion-item>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeDarkB"
        color="blue" (ionChange)="saveQrCodeDarkB()" [disabled]="colorLocked">
        <ion-label slot="start">B</ion-label>
        <ion-label slot="end">{{ env.qrCodeDarkB }}</ion-label>
      </ion-range>
    </ion-item>
  </div>

  <div class="ion-padding-bottom">
    <ion-list-header class="ion-margin-start ion-padding-horizontal" mode="md" style="font-size: large;"
      (click)="backgroundColorLocked = !backgroundColorLocked">
      <div class="d-flex justify-content-between align-items-center ion-margin-end ion-padding-end"
        style="width: 100%;">
        <span>
          {{ 'BACKGROUND_COLOR' | translate }}
        </span>
        <ion-icon *ngIf="backgroundColorLocked" name="lock-closed"
          [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
        <ion-icon *ngIf="!backgroundColorLocked" name="lock-open"
          [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
      </div>
    </ion-list-header>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeLightR"
        color="red" (ionChange)="saveQrCodeLightR()" [disabled]="backgroundColorLocked">
        <ion-label slot="start">R</ion-label>
        <ion-label slot="end">{{ env.qrCodeLightR }}</ion-label>
      </ion-range>
    </ion-item>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeLightG"
        color="green" (ionChange)="saveQrCodeLightG()" [disabled]="backgroundColorLocked">
        <ion-label slot="start">G</ion-label>
        <ion-label slot="end">{{ env.qrCodeLightG }}</ion-label>
      </ion-range>
    </ion-item>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="255" [(ngModel)]="env.qrCodeLightB"
        color="blue" (ionChange)="saveQrCodeLightB()" [disabled]="backgroundColorLocked">
        <ion-label slot="start">B</ion-label>
        <ion-label slot="end">{{ env.qrCodeLightB }}</ion-label>
      </ion-range>
    </ion-item>
  </div>

  <div class="ion-padding-bottom">
    <ion-list-header class="ion-margin-start ion-padding-horizontal" mode="md" style="font-size: large;"
      (click)="marginLocked = !marginLocked">
      <div class="d-flex justify-content-between align-items-center ion-margin-end ion-padding-end"
        style="width: 100%;">
        <span>
          {{ 'MARGIN' | translate }}
        </span>
        <ion-icon *ngIf="marginLocked" name="lock-closed" [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
        <ion-icon *ngIf="!marginLocked" name="lock-open" [color]="env.colorTheme === 'light'? 'dark' : 'light'">
        </ion-icon>
      </div>
    </ion-list-header>
    <ion-item class="ion-no-padding" lines="none">
      <ion-range class="ion-margin-start ion-padding-horizontal" min="0" max="50" [(ngModel)]="env.qrCodeMargin"
        color="primary" (ionChange)="saveQrCodeMargin()" [disabled]="marginLocked">
        <ion-label slot="end">{{ env.qrCodeMargin }}</ion-label>
      </ion-range>
    </ion-item>
  </div>


</ion-content>

<ion-footer
  [ngStyle]="env.colorTheme === 'dark'?  {'background-color': '#222428'} : (env.colorTheme === 'black'? {'background-color': '#000000'} : {'background-color': '#F0F0F0'})">
  <ion-row class="d-flex justify-content-around">
    <ion-button (click)="tapHaptic(); resetDefault()" fill="clear">
      {{ 'RESET_DEFAULT' | translate }}
    </ion-button>
  </ion-row>
</ion-footer>