@use "sass:map";
@use "sass:list";

@use "./functions.scss" as *;

$dataElementType: "data-element-type";
$elementSelector: "[data-div-type='element']";
$dataLayerElementType: "data-layer-element-type";

$prefixList: (
  section: sec,
  grid: gri,
  container: con,
  stack: sta,
  repeater: rep,
  repeater-item: repe,
  product: pro,
  category: cat,
  categoryWidget: cate,
  brand: bran,
  subCategory: subc,
  productDetails: prod,
  categoryDetails: categ,
  lightboxv2: lig,
  layouter: lay,
  layouter-item: layo,
  layouter-pro: layou,
  layouter-pro-item: layout,
  tbs-v2: tbs,
  tbsContainer: tbsco,
  marchandiserSets: march,
  buyForWithTabs: buy,
  buyForTabsContainer: buyFo,
  spotlight: spo,
  categoryGroups: catego,
  mega-menu: meg,
  mgContainer: mgcon,
  cartWrapper: cartw,
);

$VariableTypes: (
  width: "lt-wh",
  maxHeight: "lt-mx-ht",
  transform: "trsnf-vl",
);

@function convertListToCommaSeparateString($list) {
  $items: ();
  @each $key, $value in $list {
    $sl: "[#{$dataElementType}=#{$key}]";
    $items: list.append($items, $sl, comma);
  }

  @return $items;
}

@function convertIntoActualVariable($prefix, $type) {
  // $types: (
  //   width: "lt-wh",
  //   maxHeight: "lt-mx-ht",
  //   transform: "trsnf-vl",
  // );
  $suffix: map.get($VariableTypes, $type);
  @return --_ctm-#{$prefix}-#{$suffix};
}

@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
  $selector: "";
  @if ($isLayer == false) {
    $selector: $dataElementType;
  } @else {
    $selector: $dataLayerElementType;
  }
  @each $key, $value in $prefixList {
    &[#{$selector}="#{$key}"] {
      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
    }
  }
  @if ($type != maxHeight) {
    &#{$elementSelector} {
      &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
        #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
      }
    }
  }
}