@use 'sass:map';

@use '../common/var.scss' as *;
@use 'function' as *;

// 获取图鸟官方内置颜色
@mixin get-inner-color($attr, $name, $type: '', $important: false) {
  $attr-value: '';
  @if $name == 'white' {
    $attr-value: #{getCssVar('color', 'white')};
    // #{$attr}: #{getCssVar('color', 'white') if($important, '!important')};
  } @else if $name == 'black' {
    $attr-value: #{getCssVar('text', 'color', 'primary')};
    // #{$attr}: #{getCssVar('text', 'color', 'primary') if($important, '!important')};
  } @else if index($types, $name) {
    $attr-value: getCssVar('color', $name, $type);
    // #{$attr}: #{getCssVar('color', $name, $type) if($important, '!important')};
  } @else {
    $attr-value: getCssVar('color', $name, if($type == 'base', '', $type));
    // @if $type == 'base' {
    //   #{$attr}: #{getCssVar('color', $name) if($important, '!important')};
    // } @else {
    //   #{$attr}: #{getCssVar('color', $name, $type) if($important, '!important')};
    // }
  }
  $attr-value: $attr-value + if($important, '!important', '');
  #{$attr}: #{$attr-value};
}

// 背景颜色设置的特殊字体颜色
$special-bg-text-colors: ('yellow', 'lime');
// 设置背景颜色
@mixin get-bg-inner-color($name, $type) {
  @include get-inner-color('background-color', $name, $type);
  @if ($type == 'base' or $type == '') {
    @if index($special-bg-text-colors, $name) {
      @include get-inner-color('color', $name, 'dark');
    } @else {
      @include get-inner-color('color', 'white');
    }
  } @else if $type == 'light' {
    @if index($special-bg-text-colors, $name) {
      @include get-inner-color('color', $name, 'dark');
    } @else {
      @include get-inner-color('color', $name, 'base');
    }
  } @else if $type == 'dark' {
    @include get-inner-color('color', 'white');
  } @else if $type == 'disabled' {
    @include get-inner-color('color', $name, 'dark');
  }
}

// 生成渐变背景颜色
@mixin generate-gradient-color($start, $end, $reverse: false) {
  $rotate: if($reverse, -45deg, 45deg);
  background-image: repeating-linear-gradient($rotate, $start, $end);
}

// 根据不同颜色类型设置不同属性的颜色值
@mixin generate-attr-color(
  $name,
  $attr-type,
  $attr,
  $type: '',
  $important: false
) {
  &#{'_' + $attr-type} {
    @include get-inner-color($attr, $name, $type, $important);
    @content;
  }
}
@mixin generate-attr-bg-color($name, $type: '') {
  &#{'_bg'} {
    @include get-bg-inner-color($name, $type);
    @content;
  }
}
@mixin generate-attr-shadow-color($name, $type: '') {
  &#{'_shadow'} {
    @include get-inner-color(getCssVarName('shadow-color'), $name, $type);
    #{getCssVarName('shadow')}: #{getCssVar('shadow-colored')};
  }
}