<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop, else skeletonRef"
    [avrop]="avrop"
    reportTitle="Skapa Informativ rapport"
  >
    <div class="informativ-rapport-form" *ngIf="genomforandeReferens$ | async as genomforandeReferens">
      <div
        class="informativ-rapport-form__confirmation"
        *ngIf="lastSubmittedInformativRapport$ | async as lastSubmittedInformativRapport; else formRef"
      >
        <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
          <p>Informativ rapport för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.</p>
          <dl>
            <dt>Datum</dt>
            <dd>
              {{lastSubmittedInformativRapport | date:'longDate'}} kl {{lastSubmittedInformativRapport |
              date:'shortTime'}}
            </dd>
          </dl>
        </digi-notification-alert>
        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
      </div>

      <ng-template #formRef>
        <form
          class="informativ-rapport-form__form"
          [formGroup]="informativRapportFormGroup"
          id="informativ-rapport-form"
          (ngSubmit)="openConfirmDialog()"
        >
          <div class="informativ-rapport-form__form-item">
            <div class="informativ-rapport-form__label-wrapper">
              <label for="informativ-rapport-form-category">Vad gäller ärendet</label>
              <digi-button
                class="informativ-rapport-form__category-information-button"
                af-variation="tertiary"
                (afOnClick)="openCategoryInformationDialog()"
              >
                <digi-icon-info-circle-solid
                  class="msfa__digi-icon informativ-rapport-form__category-information-icon"
                  slot="icon"
                  aria-hidden="true"
                ></digi-icon-info-circle-solid>
                Info
                <span class="msfa__a11y-sr-only"> om kategorierna</span>
              </digi-button>
            </div>
            <ui-select
              [formControl]="categoryFormControl"
              class="informativ-rapport-form__category"
              uiLabel="Välj kategori"
              uiPlaceholder="Välj kategori"
              uiId="informativ-rapport-form-category"
              [uiAnnounceIfOptional]="true"
              [uiRequired]="true"
              [uiInvalid]="formControlIsInvalid('category')"
              [uiOptions]="categorySelectItems"
              [uiValidationMessage]="categoryFormControl.errors?.required"
              (uiOnChange)="categorySelectChange(categoryFormControl.value)"
            ></ui-select>
            <ng-container *ngIf="formData$ | async as formData">
              <ui-file-upload
                *ngIf="formData.category === 'dokument'"
                ngDefaultControl
                [formControl]="fileFormControl"
                uiId="informativRapportFileUpload"
                uiUploadBtnText="Välj fil"
                uiLabel="Bifoga dokument"
                uiLabelDescription="Exempel på dokument är individuell utvecklingsplan."
                [uiRequired]="true"
                [uiInvalid]="fileFormControl.invalid && informativRapportFormGroup.touched"
                [uiAnnounceIfOptional]="true"
                uploadBtnAriaLabel="Välj en fil att ladda upp"
                [uiMultiple]="false"
                [uiMaxFileSize]="8192"
                uiAccept="application/pdf"
                uiName="informativRapportFileUpload"
                (uiOnUploadFiles)="setUploadedFile($event)"
                (uiOnRemoveFile)="removeUploadedFile()"
                [uiInvalidMessage]="fileFormControl.errors?.required"
              ></ui-file-upload>
            </ng-container>
          </div>
          <div class="informativ-rapport-form__form-item">
            <ui-textarea
              [formControl]="commentFormControl"
              uiLabel="Kompletterande information"
              uiDescription="Undvik att skriva in information som känsliga personuppgifter, skyddad identitet eller deltagarens mående. Skriv i sådant fall in det telefonnummer du vill bli kontaktad på, vi bedömer om återkoppling är relevant."
              [uiRequired]="true"
              [uiInvalid]="formControlIsInvalid('comment')"
              [uiValidationMessage]="commentFormControl.errors?.required"
              [uiAnnounceIfOptional]="true"
              [uiMaxLength]="2000"
            ></ui-textarea>
          </div>
          <footer class="informativ-rapport-form__footer">
            <div class="informativ-rapport-form__cta-wrapper">
              <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>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>
          </footer>
          <digi-ng-dialog
            [afActive]="confirmDialogOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog()"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Informativ rapport"
            afAriaLabel="Förhandsgranska och skicka in Informativ rapport"
            id="confirm-informativ-rapport"
          >
            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <ng-container *ngIf="submitData$ | async as submitData; else loadingRef">
                <dt>Vad gäller ärendet</dt>
                <dd>{{getInformativRapportCategory(submitData.category)}}</dd>
                <dt>Kompletterande information</dt>
                <dd>{{submitData.comment}}</dd>
                <ng-container *ngIf="submitData.file?.size">
                  <dt>Dokument</dt>
                  <dd>
                    <a [href]="getInformativRapportFileUrl(submitData.file)" [download]="submitData.file?.name">
                      {{submitData.file?.name}}
                    </a>
                  </dd>
                </ng-container>
              </ng-container>
            </msfa-report-description-list>
            <digi-notification-alert
              *ngIf="submitError$ | async as error"
              class="informativ-rapport-form__alert"
              af-variation="danger"
              af-heading="Någonting gick fel"
            >
              <p>Kunde inte spara Informativ rapport. 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>
          <digi-ng-dialog
            [afActive]="categoryInformationDialogOpen$ | async"
            (afOnPrimaryClick)="closeCategoryInformationDialog()"
            (afOnInactive)="closeCategoryInformationDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Stäng"
            afHeading="Deltaljerad information om de olika kategorier"
            afAriaLabel="Här står det mer detaljerad information för vad kategorierna innebär"
            id="category-information"
          >
            <h3>Behov av annan insats</h3>
            <p>
              Informera om att deltagaren kan behöva en arbetsmarknadspolitisk insats, exempelvis utbildning,
              yrkessvenska, karriärvägledning, studiemotiverande folkhögskoleutbildning, praktik med mera.
            </p>
            <h3>Behov av hjälpmedel</h3>
            <p>
              Informera om att deltagare med funktionsnedsättning har behov av hjälpmedel under tjänsten, som vi som
              leverantör inte kan tillhandahålla.
            </p>
            <h3>Behov av teckenspråkstolk</h3>
            <p>Informera om att deltagare har behov av teckenspråkstolk.</p>
            <h3>Behov av dialog med Arbetsförmedlingen</h3>
            <p>
              Informera om att det behövs dialog gällande deltagarens ärende, exempelvis inför eventuellt
              stöd/anpassning eller hälsa.
            </p>
            <h3>Skicka dokumentation till Arbetsförmedlingen</h3>
            <p>Skicka in dokumentation som Arbetsförmedlingen begärt.</p>
          </digi-ng-dialog>
        </form>
      </ng-template>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Informativ rapport"></ui-skeleton>
</ng-template>

<ng-template #loadingRef>
  <ui-loader uiType="padded"></ui-loader>
</ng-template>
