/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable scss/dollar-variable-empty-line-before */

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

@use '../shared/variables.scss' as *;

$namespace: 'vxp' !default;

$types: primary, info, success, warning, error;

$color-black: #000 !default;
$color-white: #fff !default;

$color-map: () !default;
$color-map: map.deep-merge(
  (
    primary: (
      base: #339af0
    ),
    info: (
      base: #3bc9db
    ),
    success: (
      base: #20c997
    ),
    warning: (
      base: #fab005
    ),
    error: (
      base: #f03e3e
    )
  ),
  $color-map
);

@mixin define-level-colors($type, $max-level, $mode, $mixed-color) {
  @for $i from 1 through $max-level {
    $color-map: map.deep-merge(
      (
        $type: (
            '#{$mode}-#{$i}': color.mix(
                $mixed-color,
                map.get($color-map, $type, 'base'),
                math.percentage(math.div($i, 10))
              )
          )
      ),
      $color-map
    ) !global;
  }
}

@mixin define-opacity-colors($type, $max-level) {
  @for $i from 1 through $max-level {
    $color-map: map.deep-merge(
      (
        $type: (
            'opacity-#{$i}': rgba(
                map.get($color-map, $type, 'base'),
                math.percentage(math.div(10 - $i, 10))
              )
          )
      ),
      $color-map
    ) !global;
  }
}

@each $type in $types {
  @include define-level-colors($type, 9, 'light', $color-white);
  @include define-level-colors($type, 2, 'dark', $color-black);
  @include define-opacity-colors($type, 9);
}

@mixin define-type-color($type, $map: $color-map) {
  $colors: map.get($map, $type);

  @if $colors {
    @each $name in map.keys($colors) {
      @include define-css-var(('color', $type, $name), map.get($colors, $name));
    }
  }
}

$content-color-map: () !default;
$content-color-map: map.merge(
  (
    primary: #212529,
    base: #495057,
    secondary: #868e96,
    third: #a1adb1,
    disabled: #adb5bd,
    placeholder: #ced4da,
    humble: #dee2e6,
    reverse: #fff
  ),
  $content-color-map
);

$bg-color-map: () !default;
$bg-color-map: map.merge(
  (
    base: #fff,
    reverse: #131719
  ),
  $bg-color-map
);

$border-color-map: () !default;
$border-color-map: map.merge(
  (
    base: #ced4da,
    light-1: #dee2e6,
    light-2: #e9ecef,
    dark-1: #adb5bd,
    dark-2: #868e96
  ),
  $border-color-map
);

$border-width: 1px !default;
$border-style: solid !default;
$border-shape: value('border-width') value('border-style') !default;

$fill-color-map: () !default;
$fill-color-map: map.merge(
  (
    base: #fff,
    secondary: #d9dfe2,
    disabled: #dee2e6,
    hover: #e9ecef,
    humble: #f3f4f6,
    background: #f8f9fa,
    reverse: #131719
  ),
  $fill-color-map
);

$font-family-map: () !default;
$font-family-map: map.merge(
  (
    base: #{-apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji'},
    mono: #{ui-monospace,
    SFMono-Regular,
    'SF Mono',
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace}
  ),
  $font-family-map
);

$font-size-map: () !default;
$font-size-map: map.merge(
  (
    base: 14px,
    primary: 16px,
    secondary: 12px
  ),
  $font-size-map
);

$line-height-map: () !default;
$line-height-map: map.merge(
  (
    base: 1.5,
    secondary: 1
  ),
  $line-height-map
);

$radius-map: () !default;
$radius-map: map.merge(
  (
    base: 4px,
    large: 6px,
    small: 2px
  ),
  $radius-map
);

$shadow-color-map: () !default;
$shadow-color-map: map.merge(
  (
    base: #dee2e6,
    light-1: #e9ecef,
    light-2: #f1f3f5,
    dark-1: #ced4da,
    dark-2: #adb5bd
  ),
  $shadow-color-map
);

$shadow-x: 0 !default;
$shadow-y: 0 !default;
$shadow-blur: 6px !default;
$shadow-shape: value('shadow-x') value('shadow-y') value('shadow-blur') !default;
$shadow-base: value('shadow-shape') value('border-color-base') !default;

$shadow-border: 0 0 0 1px !default;
$shadow-focus: 0 0 2px 2px !default;

$transition-duration: 250ms !default;
$transition-timing: ease !default;
$transition-base: value('transition-duration') value('transition-timing') !default;

$transition-map: () !default;
$transition-map: map.merge(
  (
    color: color value('transition-base'),
    background: background-color value('transition-base'),
    border: border-color value('transition-base'),
    shadow: box-shadow value('transition-base'),
    opacity: opacity value('transition-base'),
    transform: transform value('transition-base')
  ),
  $transition-map
);

$z-index-map: () !default;
$z-index-map: map.merge(
  (
    popper: 1000,
    masker: 1500,
    popup: 2000,
    full: 2147483584
  ),
  $z-index-map
);

$break-point-sm: 576px !default;
$break-point-md: 768px !default;
$break-point-lg: 992px !default;
$break-point-xl: 1200px !default;
$break-point-xxl: 1600px !default;

$break-point-map: () !default;
$break-point-map: map.merge(
  (
    xs: (
      max-width: $break-point-sm - 0.02px
    ),
    sm: (
      min-width: $break-point-sm
    ),
    md: (
      min-width: $break-point-md
    ),
    lg: (
      min-width: $break-point-lg
    ),
    xl: (
      min-width: $break-point-xl
    ),
    xxl: (
      min-width: $break-point-xxl
    )
  ),
  $break-point-map
);

@mixin define-theme-styles($theme-config: ()) {
  @include define-css-var(
    'color-black',
    get-or-default($theme-config, $color-black, 'color-black')
  );
  @include define-css-var(
    'color-white',
    get-or-default($theme-config, $color-white, 'color-white')
  );

  @each $type in $types {
    @include define-type-color($type, get-or-default($theme-config, $color-map, 'color-map'));
  }

  @include define-preset-values(
    'content-color',
    get-or-default($theme-config, $content-color-map, 'content-color-map')
  );
  @include define-preset-values(
    'bg-color',
    get-or-default($theme-config, $bg-color-map, 'bg-color-map')
  );
  @include define-preset-values(
    'border-color',
    get-or-default($theme-config, $border-color-map, 'border-color-map')
  );

  @include define-css-var(
    'border-width',
    get-or-default($theme-config, $border-width, 'border-width')
  );
  @include define-css-var(
    'border-style',
    get-or-default($theme-config, $border-style, 'border-style')
  );
  @include define-css-var(
    'border-shape',
    get-or-default($theme-config, $border-shape, 'border-shape')
  );

  @each $name in map.keys(get-or-default($theme-config, $border-color-map, 'border-color-map')) {
    @include define-css-var(('border', $name), value('border-shape') value('border-color' $name));
  }

  @include define-preset-values(
    'fill-color',
    get-or-default($theme-config, $fill-color-map, 'fill-color-map')
  );
  @include define-preset-values(
    'font-family',
    get-or-default($theme-config, $font-family-map, 'font-family-map')
  );
  @include define-preset-values(
    'font-size',
    get-or-default($theme-config, $font-size-map, 'font-size-map')
  );
  @include define-preset-values(
    'line-height',
    get-or-default($theme-config, $line-height-map, 'line-height-map')
  );
  @include define-preset-values('radius', get-or-default($theme-config, $radius-map, 'radius-map'));

  @include define-css-var('shadow-x', get-or-default($theme-config, $shadow-x, 'shadow-x'));
  @include define-css-var('shadow-y', get-or-default($theme-config, $shadow-y, 'shadow-y'));
  @include define-css-var(
    'shadow-blur',
    get-or-default($theme-config, $shadow-blur, 'shadow-blur')
  );
  @include define-css-var(
    'shadow-shape',
    get-or-default($theme-config, $shadow-shape, 'shadow-shape')
  );
  @include define-css-var(
    'shadow-base',
    get-or-default($theme-config, $shadow-base, 'shadow-base')
  );

  @include define-preset-values(
    'shadow-color',
    get-or-default($theme-config, $shadow-color-map, 'shadow-color-map')
  );

  @each $name in map.keys(get-or-default($theme-config, $shadow-color-map, 'shadow-color-map')) {
    @include define-css-var(('shadow', $name), value('shadow-shape') value('shadow-color' $name));
  }

  @include define-css-var(
    'shadow-border',
    get-or-default($theme-config, $shadow-border, 'shadow-border')
  );
  @include define-css-var(
    'shadow-focus',
    get-or-default($theme-config, $shadow-focus, 'shadow-focus')
  );

  @include define-css-var(
    'transition-duration',
    get-or-default($theme-config, $transition-duration, 'transition-duration')
  );
  @include define-css-var(
    'transition-timing',
    get-or-default($theme-config, $transition-timing, 'transition-timing')
  );
  @include define-css-var(
    'transition-base',
    get-or-default($theme-config, $transition-base, 'transition-base')
  );

  @include define-preset-values(
    'transition',
    get-or-default($theme-config, $transition-map, 'transition-map')
  );
  @include define-preset-values(
    'z-index',
    get-or-default($theme-config, $z-index-map, 'z-index-map')
  );
  @include define-preset-values(
    'break-point',
    get-or-default($theme-config, $break-point-map, 'break-point-map'),
    true
  );
}