@use 'config';

// BEM support Func
@function selectorToString($selector) {
  $selector: inspect($selector);
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, config.$modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function containWhenFlag($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, '.' + config.$state-prefix) {
    @return true;
  } @else {
    @return false;
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true;
  } @else {
    @return false;
  }
}

@function hitAllSpecialNestRule($selector) {
  @return containsModifier($selector) or containWhenFlag($selector) or
    containPseudoClass($selector);
}

// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
@function bem($block, $element: '', $modifier: '') {
  $name: config.$namespace + config.$common-separator + $block;

  @if $element != '' {
    $name: $name + config.$element-separator + $element;
  }

  @if $modifier != '' {
    $name: $name + config.$modifier-separator + $modifier;
  }

  // @debug $name;
  @return $name;
}

// join var name
// joinVarName(('button', 'text-color')) => '--button-text-color'
@function joinVarNameWebex($list) {
  $name: '--mds-color-theme';
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}

@function joinVarNameWebexCom($list) {
  $name: '--mds';
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}

@function joinWebexName($list) {
  $name: '-' ;
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}
// getCssVarName('button', 'text-color') => '--button-text-color'
@function getCssVarNameWebex($args...) {
  @return joinVarNameWebex($args);
}

@function getCssVarNameWebexCom($args...) {
  @return joinVarNameWebexCom($args);
}
// getCssVar('button', 'text-color') => var(--button-text-color)
@function getCssVarWebex($args...) {
  @return var(#{joinVarNameWebex($args)});
}
@function getWebexVar($args...) {
  @return var(#{joinWebexName($args)});
}

@function getCssVarWebexCom($args...) {
  @return var(#{joinVarNameWebexCom($args)});
}
// generate css var from existing css var
// for example:
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
// --button-text-color: var(--color-#{$type});
@mixin css-var-from-global-webex($var, $gVar) {
  $varName: joinVarNameWebex($var);
  $gVarName: joinVarNameWebex($gVar);
  #{$varName}: var(#{$gVarName});
}
