<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Skapa Periodisk redovisning"
    [avrop]="avrop"
  >
    <div class="periodisk-redovisning-form" *ngIf="genomforandeReferens$ | async as genomforandeReferens">
      <div
        class="periodisk-redovisning-form__confirmation"
        *ngIf="submittedDate$ | async as submittedDate; else formRef"
      >
        <digi-notification-alert
          class="periodisk-redovisning-form__alert"
          af-variation="success"
          af-heading="Allt gick bra"
          af-heading-level="h3"
        >
          <p>Periodisk redovisning 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>
        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
      </div>

      <ng-template #formRef>
        <ng-container *ngIf="avrop.hasGemensamPlanering; else failedGemensamPlaneringCheck">
          <ng-container *ngIf="periods$ | async as periods; else loadingRef">
            <form
              *ngIf="periods.length; else noPeriodsAvailable"
              class="periodisk-redovisning-form__form"
              [formGroup]="formGroup"
              (ngSubmit)="openConfirmDialog()"
              id="periodisk-redovisning-form"
            >
              <digi-ng-form-select
                afLabel="Period"
                [afSelectItems]="periodsToFormselectItems(periods)"
                [afDisableValidStyle]="true"
                [afRequired]="true"
                [afAnnounceIfOptional]="true"
                [formControl]="periodFormControl"
                [afInvalid]="formControlIsInvalid(periodFormControl)"
                (afOnChange)="openChangePeriodDialogIfValuesExist()"
              ></digi-ng-form-select>

              <div>
                <digi-form-fieldset
                  af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
                  af-name="languageSupport"
                  af-form="periodisk-redovisning-form"
                >
                  <ui-radiobutton-group
                    formControlName="hasOfferedLanguageSupport"
                    [uiBooleanValues]="true"
                    [uiRequired]="true"
                    [uiAnnounceIfOptional]="true"
                    [uiRadiobuttons]="yesNoRadiobuttons"
                    [uiInvalid]="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
                    uiValidationMessage="Ett val är obligatoriskt"
                    uiDirection="horizontal"
                  ></ui-radiobutton-group>
                </digi-form-fieldset>
              </div>

              <div>
                <digi-form-fieldset
                  af-legend="Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?"
                  af-name="jobOffered"
                  af-form="periodisk-redovisning-form"
                >
                  <ui-radiobutton-group
                    formControlName="hasOfferedJob"
                    [uiBooleanValues]="true"
                    [uiRequired]="true"
                    [uiAnnounceIfOptional]="true"
                    [uiRadiobuttons]="yesNoRadiobuttons"
                    [uiInvalid]="formControlIsInvalid(hasOfferedJobFormControl)"
                    uiValidationMessage="Ett val är obligatoriskt"
                    uiDirection="horizontal"
                  ></ui-radiobutton-group>
                </digi-form-fieldset>
              </div>

              <div>
                <h2>Aktiviteter från Gemensam planering</h2>
                <p>
                  Du kan endast välja de aktiviteter som planerats i tidigare inskickad Gemensam planering för
                  deltagaren. Om du vill redovisa en aktivitet som inte finns i listan, måste du först uppdatera den
                  Gemensamma planeringen. Sedan kan du redovisa aktiviteten i Periodisk redovisning.
                </p>
              </div>

              <digi-form-fieldset
                af-legend="Ange aktiviteter som har utförts under perioden"
                af-name="activities"
                af-form="periodisk-redovisning-form"
              >
                <div class="periodisk-redovisning-form__activities">
                  <div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
                    <digi-ng-form-checkbox
                      formControlName="noActivitiesHasBeenConducted"
                      afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
                      [afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
                    ></digi-ng-form-checkbox>
                    <div aria-atomic="true" role="alert">
                      <digi-form-validation-message
                        af-variation="error"
                        *ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
                      >
                        {{formErrors?.activitiesMismatch}}
                      </digi-form-validation-message>
                    </div>
                  </div>

                  <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
                    <div
                      [formArrayName]="ACTIVITES_FORM_NAME"
                      class="periodisk-redovisning-form__activity"
                      *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
                    >
                      <ng-container [formGroupName]="i">
                        <digi-ng-form-checkbox
                          #isSelected
                          formControlName="isSelected"
                          [afLabel]="activitiesFormArrayMetadata[i].name"
                        ></digi-ng-form-checkbox>
                        <div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
                          <div class="periodisk-redovisning-form__activity-group">
                            <digi-form-input
                              class="periodisk-redovisning-form__activity-hours"
                              af-label="Antal timmar under perioden"
                              af-type="number"
                              af-max="200"
                              af-min="0"
                              [afValidation]="activityHoursIsInvalid(activityFormGroup) ? 'error' : 'neutral'"
                              formControlName="hours"
                              ngDefaultControl
                            ></digi-form-input>
                            <div aria-atomic="true" role="alert">
                              <digi-form-validation-message
                                *ngIf="activityHoursIsInvalid(activityFormGroup)"
                                af-variation="error"
                              >
                                {{activityFormGroup.errors.hours}}
                              </digi-form-validation-message>
                            </div>
                          </div>

                          <div class="periodisk-redovisning-form__activity-group">
                            <digi-ng-form-checkbox
                              formControlName="performedRemotely"
                              [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
                              afLabel="Utfört på distans"
                            ></digi-ng-form-checkbox>
                            <digi-ng-form-checkbox
                              formControlName="performedPhysically"
                              [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
                              afLabel="Utfört på plats"
                            ></digi-ng-form-checkbox>
                            <div aria-atomic="true" role="alert">
                              <digi-form-validation-message
                                *ngIf="activityLocationIsInvalid(activityFormGroup)"
                                af-variation="error"
                              >
                                {{activityFormGroup.errors.locationCheckboxes}}
                              </digi-form-validation-message>
                            </div>
                          </div>
                        </div>
                      </ng-container>
                    </div>
                  </ng-container>
                </div>
              </digi-form-fieldset>

              <footer class="periodisk-redovisning-form__footer">
                <div class="periodisk-redovisning-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>
          </ng-container>

          <digi-ng-dialog
            [afActive]="confirmDialogIsOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog()"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Periodisk redovisning"
            afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning"
            id="confirm-periodisk-redovisning-form"
          >
            <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <ng-container *ngIf="submitData$ | async as submitData; else loadingRef">
                <dt>Period</dt>
                <dd>{{getPeriodName(submitData.period)}}</dd>
                <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren:</dt>
                <dd>{{submitData.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>

                <dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren:</dt>
                <dd>{{submitData.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>

                <dt>Aktiviteter som utförts under perioden:</dt>
                <dd *ngIf="submitData.activities.length === 0; else activityList">
                  Deltagaren har inte deltagit i några aktiviteter denna period
                </dd>
                <ng-template #activityList>
                  <dd *ngFor="let activity of submitData.activities" class="periodisk-redovisning-form__activity-item">
                    <digi-icon-check-circle
                      class="msfa__digi-icon periodisk-redovisning-form__activity-check"
                      aria-hidden="true"
                    ></digi-icon-check-circle>
                    <span>{{getActivityInfoAsString(activity)}}</span>
                  </dd>
                </ng-template>
              </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 Periodisk redovisning. 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]="changePeriodDialogIsOpen$ | async"
            (afOnPrimaryClick)="closePeriodDialogAndKeepForm()"
            (afOnInactive)="closePeriodDialogAndKeepForm()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Ja, behåll val"
            afSecondaryButtonText="Nej, rensa formuläret"
            (afOnSecondaryClick)="closePeriodDialogAndResetForm()"
            afHeading="Du har bytt period"
            afAriaLabel="Du har bytt period. Vill du behålla de svar och aktiviteter du valt"
            id="confirm-periodisk-redovisning-form"
          >
            <p>Vill du behålla de svar och aktiviteter du tidigare valt?</p>
          </digi-ng-dialog>
        </ng-container>
      </ng-template>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #failedGemensamPlaneringCheck>
  <div class="periodisk-redovisning-form__warning">
    <digi-notification-alert
      af-heading="Kan inte skapa Periodisk redovisning"
      af-size="l"
      af-variation="info"
      af-closeable="false"
    >
      <p>En Gemensam planering måste ha mottagits för att en Periodisk redovisning ska kunna skapas.</p>
    </digi-notification-alert>

    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
  </div>
</ng-template>

<ng-template #noPeriodsAvailable>
  <div class="periodisk-redovisning-form__warning">
    <digi-notification-alert
      af-heading="Kan inte skapa Periodisk redovisning"
      af-size="l"
      af-variation="warning"
      af-closeable="false"
    >
      <p>
        Du kan inte skapa en Periodisk redovisning eftersom perioden fortfarande pågår. Första dagen efter att perioden
        är slut kan du skapa och skicka en Periodisk redovisning.
      </p>
    </digi-notification-alert>

    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
  </div>
</ng-template>

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

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