// Math module for division
@use "sass:math";

@import "../atoms-settings";
@import "colors";
@import "../functions/string-replace";

@include define-color-variables();

@function offset-brand($direction, $color, $percentage) {
  $mix-color: #ffffff;
  @if $direction == "darker" {
    $mix-color: #000000;
  }

  $adjusted-color: mix($mix-color, $color, $percentage * 1%);
  @return $adjusted-color;
}


$color-levels: 25, 50, 75;
@each $name, $color in $color-brands {
  $selector: null;
  @if $name == $color-default-brand {
    $selector: ":root, .theme--#{$name}";
  }
  @else {
    $selector: ".theme--#{$name}";
  }

  #{$selector} {

    @each $level in $color-levels {
      --color-brand-light-#{$level}: #{offset-brand("lighter", $color, $level)};
    }

    --color-brand: #{$color};

    @each $level in $color-levels {
      --color-brand-dark-#{$level}: #{offset-brand("darker", $color, $level)};
    }

  }
}

@mixin show-contrast-ratio($theme-name, $color1-name, $color2-name, $warning: "show") {
  $ratio: contrast-ratio(get-hexcode($theme-name, $color1-name), get-hexcode($theme-name, $color2-name));
  $ratio: math.div(round(100 * $ratio), 100);
  @if $ratio < $color-foreground-min-ratio and $warning == "show" {
    $ratio: "#{$ratio} WARNING!";
  }
  content: "#{$ratio}";
}

body {
  font-family: sans-serif;
}

.color-atom {


  &__colors {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    flex-direction: column;
    border: 1px solid #dedede;

    & > div {
      &:active {
        outline: red 10px dashed;
        z-index: 400;
      }
    }
  }

  $color-variables: map_get($color-themes, $color-default-brand);
  @each $name, $color in $color-variables {
    &__#{$name} {
      background-color: color($name);
      flex: 1 0 auto;
      position: relative;
      padding: .2rem;

      &::after {
        content: " - #{$name}";
      }

      &::after,
      &::before {
        font-family: monospace;
        width: 100%;
        font-size: .9em;
        user-select: auto;

        @if $name == "foreground" or $name == "foreground-secondary" {
          color: color("background");
        }
        @else if $name == "background" or $name == "background-secondary" {
          color: color("foreground");
        }
        @else if $name == "theme" or $name == "foreground-theme" or $name == "theme-hover" or $name == "foreground-theme-hover" or $name == "border-theme" or $name == "border-text-link" {
          color: color("theme-foreground");
        }
        @else if $name == "theme-foreground" {
          color: color("theme");
        }
      }
    }
  }

  @each $theme-name, $colors in $color-themes {
    $style: map_get($colors, "style");
    $selector: null;
    $theme-color: null;
    @if $theme-name == $color-default-brand {
      $selector: "";
    }
    @else if $style == "dark" {
      $theme-color: str-replace(#{$theme-name}, "dark-", $replace: '');
      $selector: ".theme--#{$theme-color}.theme--dark";
    }
    @else {
      $selector: ".theme--#{$theme-name}";
    }

    $color-variables: map_get($color-themes, $color-default-brand);
    @each $color-name, $color in $color-variables {
      & #{$selector} &__#{$color-name}::before {
        $hex-code: get-hexcode($theme-name, $color-name);
        content: "#{$hex-code}";
      }
    }
  }

  &__content {
    padding: 2rem;
    border: 1px solid #dedede;
    @include set-colors("background");

    .text--secondary {
      color: color("foreground-secondary");
    }

    .text--disabled {
      color: color("foreground-disabled");
    }

    .text--theme {
      color: color("theme");
    }

    .text--theme-legiable {
      color: color("foreground-theme");
    }

    p {
      margin-top: 0;
    }

    .text--border {
      padding-bottom: .1rem;
      border-bottom: 2px solid color("border-text-link");
    }

    button {
      @include set-colors("theme");
      padding: 1rem 1.4rem;
      line-height: 1rem;
      border: none;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      text-align: left;
      margin-right: 1rem;
      box-shadow: $shadow-style-front color("shadow");

      &:hover {
        background-color: color("theme-hover");
      }

      &.button--dimmed {
        @include set-colors("interactive");
        margin-right: 0;
        box-shadow: $shadow-style-front color("shadow");

        &:hover {
          background-color: color("interactive-hover");
        }
      }
    }

    hr {
      width: 100%;
      border: none;
      height: 2px;
      background-color: color("border");
      margin: 1rem 0;
    }

    hr.hr--theme {
      background-color: color("border-theme");
    }

    .box {
      @include set-colors("background-secondary");
      padding: 1rem;
      margin-bottom: 1rem;

      & p {
        margin: 0;
      }
    }

    .theme-colors {
      padding: 1rem;
      margin-left: 3rem;
      margin-top: 1rem;
      margin-bottom: 3rem;
      background: color("theme-secondary");
      color: color("theme-secondary");
      position: relative;

      &__theme {
        height: 1.4rem;
        margin-left: 3rem;
        background: color("theme");
        color: color("theme");
        position: relative;
      }
    }

    .utility {
      display: flex;
      justify-content: space-between;
      color: color("utility-foreground");
      margin-bottom: 1rem;

      span {
        padding: .5rem;
      }

      .interactive {
        flex-shrink: 0;
      }

      &--confirm {
        background-color: color("utility-confirm-background");

        .interactive {
          background-color: color("utility-confirm");
        }
      }

      &--attention {
        background-color: color("utility-attention-background");

        .interactive {
          background-color: color("utility-attention");
        }
      }

      &--warning {
        background-color: color("utility-warning-background");

        .interactive {
          background-color: color("utility-warning");
        }
      }

    }

    *::before,
    *::after {
      font-family: monospace;
      vertical-align: super;
      font-size: .9em;
      display: inline-block;
    }

    *::before {
      margin-right: .2rem;
    }

    *::after {
      margin-left: .2rem;
    }
  }

  @each $theme-name, $colors in $color-themes {
    $style: map_get($colors, "style");
    $selector: null;
    $theme-color: null;
    @if $theme-name == $color-default-brand {
      $selector: "";
    }
    @else if $style == "dark" {
      $theme-color: str-replace(#{$theme-name}, "dark-", $replace: '');
      $selector: ".theme--#{$theme-color}.theme--dark";
    }
    @else {
      $selector: ".theme--#{$theme-name}";
    }

    & .color-atom__content#{$selector} {

      .text--theme::before {
        @include show-contrast-ratio($theme-name, "background", "theme");
      }

      .text--theme-legiable::before {
        @include show-contrast-ratio($theme-name, "background", "foreground-theme");
      }

      .text--default::before {
        @include show-contrast-ratio($theme-name, "background", "foreground");
      }

      .text--secondary::before {
        @include show-contrast-ratio($theme-name, "background", "foreground-secondary");
      }

      /*
      .text--border::after {
        @include show-contrast-ratio($theme-name, "border-theme", "foreground", $warning: "none");
        color: color("border-theme");
      }


      hr::before {
        @include show-contrast-ratio($theme-name, "background", "border", $warning: "none");
        color: color("border");
      }
      */

      .text--disabled::before {
        @include show-contrast-ratio($theme-name, "background", "foreground-disabled");
      }

      button::after {
        @include show-contrast-ratio($theme-name, "theme", "theme-foreground");
        vertical-align: text-top;
      }

      button.button--dimmed::after {
        @include show-contrast-ratio($theme-name, "interactive", "foreground");
      }

      .box p::before {
        @include show-contrast-ratio($theme-name, "foreground", "background-secondary");
      }

      .theme-colors::before {
        @include show-contrast-ratio($theme-name, "theme-secondary", "background", $warning: "none");
        position: absolute;
        width: 3rem;
        text-align: right;
        padding-right: 0.2rem;
        left: -3rem;
        top: 0;
      }

      .theme-colors__theme::before {
        @include show-contrast-ratio($theme-name, "theme", "theme-secondary", $warning: "none");
        position: absolute;
        width: 3rem;
        text-align: right;
        padding-right: 0.2rem;
        left: -3rem;
        top: 0;
      }

      .utility {
        &--confirm {
          & span::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-confirm-background");
          }

          & .interactive::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-confirm");
          }
        }

        &--attention {
          & span::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-attention-background");
          }

          & .interactive::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-attention");
          }
        }

        &--warning {
          & span::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-warning-background");
          }

          & .interactive::before {
            @include show-contrast-ratio($theme-name, "utility-foreground", "utility-warning");
          }
        }
      }
    }
  }
}




.color-sample {
  padding: 3rem 1rem;
  background-color: var(--color-brand);

  @each $level in $color-levels {
    &--dark-#{$level} {
      background-color: var(--color-brand-dark-#{$level});
      padding: 0 1rem;
    }

    &--light-#{$level} {
      background-color: var(--color-brand-light-#{$level});
      padding: 0 1rem;
    }
  }
}


.color-test {
  margin-right: 1rem;

  @each $neutral-name, $neutral-color in $color-neutrals {
    &--#{$neutral-name} {

      color: $neutral-color;

      @each $name, $color in $color-brands {
        $theme-selector: ".theme--#{$name}";
        @if $name == $color-default-brand {
          $theme-selector: null;
        }

        @each $level in $color-levels {
          #{$theme-selector} .color-sample--light-#{$level} &::after {
            content: "#{contrast-ratio(offset-brand("lighter", $color, $level), $neutral-color)}";
          }
          #{$theme-selector} .color-sample &::after {
            content: "#{contrast-ratio($color, $neutral-color)}"
          }
          #{$theme-selector} .color-sample--dark-#{$level} &::after {
            content: "#{contrast-ratio(offset-brand("darker", $color, $level), $neutral-color)}";
          }
        }
      }
    }
  }
}


.color-contrast {
  background-color: var(--color-brand);

  & > * {
    height: 2rem;
  }

  &--darker {
    background-color: var(--color-brand-dark-25);
  }

  &--lighter {
    background-color: var(--color-brand-light-25);
  }

  @each $name, $color in $color-brands {
    $theme-selector: ".theme--#{$name}";
    @if $name == $color-default-brand {
      $theme-selector: null;
    }
    #{$theme-selector} &--calculated-darker {
      background-color: get-contrast-color(map_get($color-brands, $name), 1.5, "darker");
    }

    #{$theme-selector} &--calculated-lighter {
      background-color: get-contrast-color(map_get($color-brands, $name), 1.5, "lighter");
    }
  }
}