<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Skapa Gemensam planering"
    [avrop]="avrop"
  >
    <div class="gemensam-planering-form" *ngIf="currentGenomforandeReferens$ | async as genomforandeReferens">
      <div class="gemensam-planering-form__warning" *ngIf="!isAllowedToReport(avrop); else reportRef">
        <digi-notification-alert af-variation="warning" af-heading="Kan inte skapa Gemensam planering">
          <p>{{notAllowedToReportWarning(avrop)}}</p>
        </digi-notification-alert>

        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
      </div>
      <ng-template #reportRef>
        <div
          class="gemensam-planering-form__confirmation"
          *ngIf="lastSubmittedGP$ | async as lastSubmittedGP; else formRef"
        >
          <digi-notification-alert
            class="gemensam-planering-form__alert"
            af-variation="success"
            af-heading="Allt gick bra"
            af-heading-level="h3"
          >
            <p>
              Gemensam planering för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och inväntar
              godkännande.
            </p>
            <dl>
              <dt>Datum</dt>
              <dd>{{lastSubmittedGP | date:'longDate'}} kl {{lastSubmittedGP | date:'shortTime'}}</dd>
            </dl>
          </digi-notification-alert>
          <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
        </div>
        <ng-template #formRef>
          <form
            class="gemensam-planering-form__form"
            [formGroup]="gpFormGroup"
            (ngSubmit)="openConfirmDialog()"
            id="gemensam-planering-form-form"
          >
            <digi-form-fieldset
              af-legend="Deltar arbetssökande på distans?"
              af-name="distance"
              af-form="gemensam-planering-form-form"
            >
              <ui-radiobutton-group
                formControlName="distance"
                [uiBooleanValues]="true"
                [uiRequired]="true"
                [uiAnnounceIfOptional]="true"
                [uiRadiobuttons]="distanceRadiobuttons"
                uiDirection="horizontal"
              ></ui-radiobutton-group>
            </digi-form-fieldset>
            <digi-form-fieldset af-legend="Aktiviteter" af-name="aktivitetsIds" af-form="gemensam-planering-form-form">
              <p>
                Varje Gemensam planering måste innehålla de två obligatoriska aktiviteterna samt en frivillig aktivitet
                som en del av det individuella stödet för varje deltagare.
              </p>

              <ng-container *ngIf="activities$ | async as activities; else loadingRef">
                <ul class="gemensam-planering-form__activity-list">
                  <li class="gemensam-planering-form__activity-item" *ngFor="let activity of activities;">
                    <digi-form-checkbox
                      [afLabel]="activity.name + (isActivityObligatory(activity.id) ? ' (obligatorisk)' : '')"
                      [afValue]="activity.id"
                      [afValidation]="showActivityAsInvalid(activity.id) ? 'error' : 'neutral'"
                      [afChecked]="isActivityChecked(activity.id) || isActivityObligatory(activity.id)"
                      (afOnChange)="updateActivityIds(activity.id, $event.detail.target.checked)"
                    ></digi-form-checkbox>
                  </li>
                </ul>
                <digi-form-validation-message *ngIf="formControlIsInvalid('activityIds')" af-variation="error"
                  >{{gpFormGroup.errors.activityIds}}</digi-form-validation-message
                >
              </ng-container>
            </digi-form-fieldset>

            <footer class="gemensam-planering-form__footer">
              <div class="gemensam-planering-form__cta-wrapper">
                <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
                <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
                  <span>Avbryt</span>
                  <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
                </msfa-back-link>
              </div>
            </footer>
          </form>
          <digi-ng-dialog
            [afActive]="confirmDialogOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Gemensam planering"
            afAriaLabel="Förhandsgranska och skicka in Gemensam planering"
            id="confirm-gemensam-planering-form"
          >
            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <dt>Deltar arbetssökande på distans?</dt>
              <dd>{{gpFormGroup.value.distance ? 'Ja' : 'Nej'}}</dd>
              <dt>Aktiviteter</dt>
              <dd>
                <ul class="gemensam-planering-form__activity-list" *ngFor="let activity of activities$ | async">
                  <li
                    class="gemensam-planering-form__activity-item"
                    *ngIf="activityIdsFormArray.value.includes(activity.id)"
                  >
                    <digi-icon-check-circle
                      class="msfa__digi-icon gemensam-planering-form__activity-check"
                      aria-hidden="true"
                    ></digi-icon-check-circle>
                    {{activity.name}}
                  </li>
                </ul>
              </dd>
            </msfa-report-description-list>
            <digi-notification-alert
              *ngIf="error$ | async as error"
              class="gemensam-planering-form__alert"
              af-variation="danger"
              af-heading="Någonting gick fel"
            >
              <p>Kunde inte spara Gemensam planering. Ladda om sidan och försök igen.</p>
              <p class="msfa__small-text" *ngIf="error.message">{{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 Gemensam planering"></ui-skeleton>
</ng-template>

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