@use 'sass:map';
@use '../../../../mx-core/src/base/colors';

@mixin mx-json-viewer-theme($theme) {
  $is-dark: map.get($theme, is-dark);

  $json-light-theme-colors: (
    string: #7fa360,
    number: #e55b62,
    boolean: #f4a259,
    date: #5b8e7d,
    array: #a8a8a8,
    object: #a8a8a8,
    function: #a8a8a8,
    'null': #ffffff,
    undefined: #ffffff
  );

  $json-dark-theme-colors: (
    string: #b2c79f,
    number: #ef9ca0,
    boolean: #f8c79b,
    date: #9cbbb1,
    array: #cacaca,
    object: #cacaca,
    function: #cacaca,
    'null': rgba(#000, 0.6),
    undefined: rgba(#000, 0.6)
  );

  $color-theme: colors.$mx-light;

  @if $is-dark == true {
    $color-theme: colors.$mx-dark;
  }

  .ngx-json-viewer {
    .segment {
      .segment-main {
        .toggler {
          color: map.get($color-theme, onSurfaceVariant);
        }
      }
    }

    @each $type, $color in $json-light-theme-colors {
      .segment-type-#{$type} > .segment-main > .segment-value {
        color: $color;
      }
    }

    // special cases need highlightted
    .segment-type-null > .segment-main > .segment-value {
      background-color: #dadada;
    }
    .segment-type-undefined > .segment-main {
      & > .segment-value {
        background-color: #dadada;
      }
    }
  }
}