@use 'sass:color';
@use 'sass:map';

@use '@finastra/angular-theme' as fds;
@use '@finastra/fds-theme/color' as colors;
@use '@finastra/fds-theme/typography';

@mixin theme($theme) {
  $primary: fds.get-color-from-token(primary, null, $theme);
  $is-dark: map.get($theme, is-dark);

  $default-background-color: var(--fds-surface);

  $wizard-background-color: var(--fds-background);
  $wizard-step-active-color: var(--fds-secondary);
  $wizard-step-done-color: var(--fds-success);
  $wizard-timeline-color: var(--fds-on-surface-medium);

  $wizard-dark-blue: if($is-dark, black, map_get(fds.$uxg-violet, 900));
  $wizard-step-description-color: rgba(map_get(fds.$uxg-violet, 100), 0.8);
  $wizard-step-container-active-color: rgba($primary, 0.45);

  $wizard-dot-color: var(--fds-surface-disabled);
  $wizard-dot-active-color: var(--fds-primary);

  .uxg-wizard {
    background: $wizard-background-color;

    .uxg-wizard-container {
      background: $default-background-color;
    }

    .uxg-wizard-right-panel {
      background: $wizard-dark-blue;

      .close-button {
        @include colors.color(on-primary);
      }
    }

    .uxg-wizard-timeline,
    .uxg-wizard-timeline-xs {
      .step {
        background-color: $default-background-color;
        color: $wizard-timeline-color;

        &.done {
          background-color: $wizard-step-done-color;
          border-color: $wizard-step-done-color;
          @include colors.color(on-success);
        }

        &.active {
          border-color: $wizard-step-active-color;
          background-color: $wizard-step-active-color;

          @include colors.color(on-secondary);
        }
      }

      .timeline-progress-bar {
        background: $wizard-timeline-color;

        .timeline-progress {
          background: $wizard-step-done-color;
        }
      }

      .step-info-container {
        .step-title {
          @include colors.color(on-dark);
        }

        .step-description {
          color: $wizard-step-description-color;
        }

        &.disabled {
          .step-title,
          .step-description {
            opacity: 0.2;
          }
        }

        &.active {
          background-color: $wizard-step-container-active-color;

          .step-description {
            @include colors.color(on-dark);
          }
        }
      }
    }

    .uxg-wizard-timeline-xs {
      background: $wizard-dark-blue;

      .close-button {
        @include colors.color(on-primary);
      }
    }

    .uxg-wizard-footer {
      .dot {
        background-color: $wizard-dot-color;

        &.active {
          background-color: $wizard-dot-active-color;
        }
      }
    }
  }
}

@mixin typography($config: null) {
  .uxg-wizard {
    .uxg-wizard-timeline {
      .step {
        font: {
          weight: var(--fds-headline-1-font-weight);
          size: var(--fds-subtitle-1-font-size);
        }

        mat-icon {
          font-weight: var(--fds-headline-1-font-weight);
        }
      }

      .step-info-container {
        .step-description {
          @include typography.typography(caption);
        }
      }
    }

    .uxg-wizard-timeline-xs {
      .step {
        font: {
          weight: var(--fds-headline-2-font-weight);
          size: var(--fds-subtitle-2-font-size);
        }

        mat-icon {
          font-weight: var(--fds-headline-2-font-weight);
        }
      }

      .step-info-container {
        .step-description {
          @include typography.typography(body-3);

          font-weight: var(--fds-caption-font-weight);
        }
      }
    }
  }
}