@use "sass:map";
@use "sass:color";

@use "../../variables/colors";
@use "../../variables/states";
@use "../../di-inline";
@use "../../components/link/link.variables" as link-variables;

@use "../functions/contrast-color.functions" as contrast-color-functions;

// Automatically applies accessible (WCAG-compliant) text and UI colors based on a given background color.

// This mixin determines an appropriate contrast color for text (`light` or `dark`)
// and dynamically adjusts related colors for links, icons, alerts, and buttons
// to ensure consistent readability and sufficient contrast across different backgrounds.
// Automatically applies accessible (WCAG-compliant) text and UI colors
// based on a provided background color. Adjusts related UI elements via custom css props to ensure consistent
// readability.

// @param {Color} $background-color
//   The background color used to compute contrast colors.

// @param {String} $self
//   The context of the component using this mixin (e.g., "alert", "link", "button").
//   Determines which sections of styles should be skipped to avoid overriding component-specific rules.

@mixin apply($background-color, $self) {
  // run contrast-color function to determine WCAG-compliant text color
  $contrast-color: contrast-color-functions.apply($background-color);
  $is-white-bg: contrast-color-functions.is-white($background-color);
  $is-dark-contrast: $contrast-color == colors.$contrast-dark;

  $icon-color: "wit";

  @if $is-dark-contrast {
    $icon-color: "zwart";
  }

  @if $self != "alert" {
    @if $is-white-bg {
      --_dso-alert-success-border-color: initial;
      --_dso-alert-error-border-color: initial;
      --_dso-alert-info-border-color: initial;
      --_dso-alert-warning-border-color: initial;
    } @else {
      --_dso-alert-success-border-color: #{states.$success-compact-accent-color};
      --_dso-alert-error-border-color: #{states.$danger-compact-accent-color};
      --_dso-alert-info-border-color: #{states.$info-compact-accent-color};
      --_dso-alert-warning-border-color: #{states.$warning-compact-accent-color};
    }
  }

  @if $self != "link" and not $is-white-bg {
    --_dso-link-color: currentColor;
    --_dso-link-hover-color: currentColor;
    --_dso-link-visited-color: currentColor;

    @each $mode, $cfg in link-variables.$linkIcons {
      --_dso-link-#{$mode}-icon: var(#{di-inline.custom-property(map.get($cfg, "icon"), $icon-color)});
    }
  }

  @if $self != "link-list" and not $is-white-bg {
    --_dso-link-list-chevron-icon: var(#{di-inline.custom-property("chevron-right", $icon-color)});
  }

  @if $self != "icon-button" and not $is-white-bg {
    @if $is-dark-contrast {
      --_dso-icon-button-secondary-active-color: #{colors.$wit};
      --_dso-icon-button-secondary-active-background-color: #{colors.$bosgroen-120};
      --_dso-icon-button-secondary-toggled-color: #{colors.$wit};
      --_dso-icon-button-secondary-toggled-background-color: #{colors.$bosgroen};
      --_dso-icon-button-secondary-toggled-hover-background-color: #{colors.$bosgroen-130};
      --_dso-icon-button-tertiary-color: #{colors.$grijs-90};
      --_dso-icon-button-tertiary-hover-color: #{colors.$grijs-70};
      --_dso-icon-button-tertiary-active-color: #{colors.$bosgroen-120};
      --_dso-icon-button-tertiary-toggled-color: #{colors.$bosgroen};
      --_dso-icon-button-tertiary-toggled-hover-color: #{colors.$bosgroen-130};
      --_dso-icon-button-tertiary-disabled-color: #{colors.$grijs-40};
    } @else if $contrast-color == colors.$contrast-light {
      --_dso-icon-button-secondary-active-color: #{colors.$wit};
      --_dso-icon-button-secondary-active-background-color: #{rgba(colors.$wit, 0.4)};
      --_dso-icon-button-secondary-toggled-color: #{colors.$wit};
      --_dso-icon-button-secondary-toggled-background-color: #{rgba(colors.$wit, 0.2)};
      --_dso-icon-button-secondary-toggled-hover-background-color: #{rgba(colors.$wit, 0.3)};
      --_dso-icon-button-tertiary-color: #{colors.$grijs-5};
      --_dso-icon-button-tertiary-hover-color: #{colors.$wit};
      --_dso-icon-button-tertiary-active-color: #{rgba(colors.$wit, 0.4)};
      --_dso-icon-button-tertiary-toggled-color: #{colors.$wit};
      --_dso-icon-button-tertiary-toggled-hover-color: #{rgba(colors.$wit, 0.3)};
      --_dso-icon-button-tertiary-disabled-color: #{colors.$grijs-30};
    }
  }

  @if $self != "button" and not $is-white-bg {
    --_dso-button-tertiary-download-icon: var(#{di-inline.custom-property("download", $icon-color)});
    --_dso-button-tertiary-external-link-icon: var(#{di-inline.custom-property("external-link", $icon-color)});

    @if $is-dark-contrast {
      --_dso-button-tertiary-color: #{colors.$grijs-90};
      --_dso-button-tertiary-hover-color: #{colors.$grijs-70};
      --_dso-button-tertiary-active-color: #{colors.$bosgroen-140};
      --_dso-button-tertiary-disabled-color: #{colors.$grijs-40};
    } @else if $contrast-color == colors.$contrast-light {
      --_dso-button-primary-background-color: #{colors.$wit};
      --_dso-button-primary-hover-background-color: #{rgba(colors.$wit, 0.8)};
      --_dso-button-primary-active-background-color: #{colors.$grijs-5};
      --_dso-button-primary-disabled-background-color: #{rgba(colors.$wit, 0.6)};
      --_dso-button-primary-border-color: #{colors.$wit};
      --_dso-button-primary-hover-border-color: #{rgba(colors.$wit, 0.8)};
      --_dso-button-primary-active-border-color: #{colors.$grijs-5};
      --_dso-button-primary-disabled-border-color: #{rgba(colors.$wit, 0.6)};
      --_dso-button-primary-color: #{colors.$grijs-90};
      --_dso-button-primary-hover-color: #{colors.$grijs-90};
      --_dso-button-primary-active-color: #{colors.$grijs-90};
      --_dso-button-primary-disabled-color: #{colors.$grijs-60};
      --_dso-button-secondary-background-color: none;
      --_dso-button-secondary-hover-background-color: #{rgba(colors.$wit, 0.2)};
      --_dso-button-secondary-active-background-color: #{rgba(colors.$wit, 0.4)};
      --_dso-button-secondary-disabled-background-color: none;
      --_dso-button-secondary-border-color: #{colors.$wit};
      --_dso-button-secondary-hover-border-color: #{colors.$wit};
      --_dso-button-secondary-active-border-color: #{rgba(colors.$wit, 0.4)};
      --_dso-button-secondary-disabled-border-color: #{rgba(colors.$wit, 0.7)};
      --_dso-button-secondary-color: #{colors.$wit};
      --_dso-button-secondary-hover-color: #{colors.$wit};
      --_dso-button-secondary-active-color: #{colors.$wit};
      --_dso-button-secondary-disabled-color: #{rgba(colors.$wit, 0.7)};
      --_dso-button-tertiary-color: #{colors.$wit};
      --_dso-button-tertiary-hover-color: #{colors.$wit};
      --_dso-button-tertiary-active-color: #{colors.$wit};
      --_dso-button-tertiary-disabled-color: #{colors.$grijs-30};
    }
  }

  // set css properties
  background-color: $background-color;
  color: $contrast-color;
}