<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    [avrop]="avrop$ | async"
    description="Här rapporterar du deltagarens avvikelser. Exempelvis kan du rapportera om tjänsten inte fungerar för deltagaren eller om deltagaren misskött sig under tjänsten."
    reportTitle="Avvikelserapport (avvikelse)"
  >
    <div class="avvikelse-report-form">
      <div class="avvikelse-report-form__warning" *ngIf="!isAllowedToReport(avrop); else reportRef">
        <digi-notification-alert af-variation="warning" af-heading="Kan inte skapa Avvikelserapport (avvikelse)">
          <p>{{notAllowedToReportWarning(avrop)}}</p>
        </digi-notification-alert>

        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
      </div>
      <ng-template #reportRef>
        <div *ngIf="submittedDate$ | async as submittedDate; else formRef" class="avvikelse-report-form__confirmation">
          <digi-notification-alert
            af-heading="Allt gick bra"
            af-heading-level="h3"
            af-variation="success"
            class="avvikelse-report-form__alert"
          >
            <p>
              Avvikelserapport (avvikelse) för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.
            </p>
            <dl>
              <dt>Datum</dt>
              <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
            </dl>
          </digi-notification-alert>
          <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
        </div>

        <ng-template #formRef>
          <form class="avvikelse-report-form__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
            <div class="avvikelse-report-form__form-item">
              <ui-select
                *ngIf="reasonsAsUiSelectOptions$ | async as reason; else loadingRef"
                [formControlName]="reasonFormName"
                uiLabel="Orsak till avvikelse"
                uiPlaceholder="Välj orsak till avvikelse"
                [uiAnnounceIfOptional]="true"
                [uiRequired]="true"
                [uiInvalid]="formControlIsInvalid(reasonFormControl)"
                [uiOptions]="reason"
                [uiValidationMessage]="reasonFormControl.errors?.required"
              ></ui-select>
            </div>
            <div
              class="avvikelse-report-form__form-item avvikelse-report-form__textareas"
              [formArrayName]="questionsFormName"
              *ngIf="questionsForChosenReason$ | async as questions"
            >
              <div
                class="avvikelse-report-form__form-item"
                *ngFor="let question of questionsFormArray.controls; let i=index"
              >
                <ui-textarea
                  [formControlName]="i"
                  [uiLabel]="questions[i]?.name"
                  [uiRequired]="questionIsRequired(questions[i])"
                  [uiValidationMessage]="question.errors?.required || question.errors?.invalid"
                  [uiAnnounceIfOptional]="true"
                  [uiMaxLength]="2000"
                  [uiInvalid]="formControlIsInvalid(question)"
                ></ui-textarea>
              </div>
            </div>

            <div class="avvikelse-report-form__form-item" *ngIf="chosenReasonId$ | async">
              <digi-ng-form-datepicker
                [afDisableValidStyle]="true"
                [afMinDate]="avrop.receivedTimestamp"
                [afMaxDate]="maxDate(avrop.endDate)"
                [afInvalid]="formControlIsInvalid(avvikelseDateFormControl)"
                [afValidationMessages]="{required: 'Datum är obligatoriskt'}"
                [afAnnounceIfOptional]="true"
                [afRequired]="true"
                [afLabel]="'Välj dag för avvikelse'"
                [formControlName]="reportingDateFormName"
              ></digi-ng-form-datepicker>
            </div>

            <div class="avvikelse-report-form__cta-wrapper">
              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
              <ui-link-button uiRouterLink="../" uiType="secondary">
                Avbryt
                <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
              </ui-link-button>
            </div>
          </form>
          <digi-ng-dialog
            [afActive]="confirmDialogIsOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog()"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Avvikelserapport (avvikelse)"
            afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (avvikelse)"
            id="confirmAvvikelserapport"
          >
            <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <dt>Orsak till avvikelse:</dt>
              <dd>{{(chosenReason$ | async)?.name }}</dd>
              <ng-container *ngIf="avvikelseSubmitData$ | async as avvikelseSubmitData; else loadingRef">
                <ng-container *ngFor="let question of avvikelseSubmitData.avvikelseAlternativ.frageformular">
                  <dt>{{getCurrentQuestionFromId(question.fraga).name}}</dt>
                  <dd>{{question.svar.length === 0 ? 'Inget svar' : question.svar }}</dd>
                </ng-container>
                <dt>Dag för avvikelse:</dt>
                <dd>{{avvikelseSubmitData.avvikelseAlternativ.rapporteringsdatum }}</dd>
              </ng-container>
            </msfa-report-description-list>
            <digi-notification-alert
              *ngIf="submitError$ | async as error"
              af-variation="danger"
              af-heading="Någonting gick fel"
            >
              <p>Kunde inte spara Avvikelserapport (avvikelse). Ladda om sidan och försök igen.</p>
              <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
            </digi-notification-alert>
          </digi-ng-dialog>
        </ng-template>
      </ng-template>
    </div>
  </msfa-report-layout>
</msfa-layout>
<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Avvikelserapport (avvikelse)"></ui-skeleton>
</ng-template>
<ng-template #loadingRef>
  <ui-loader uiType="padded"></ui-loader>
</ng-template>
