@use 'sass:meta';
@use './constants.scss';

@use '../utils/tokens.scss' as tokens;

$spaceTokens: (
  '0': tokens.$bm-sem-space-0,
  '12': tokens.$bm-sem-space-12,
  '25': tokens.$bm-sem-space-25,
  '50': tokens.$bm-sem-space-50,
  '75': tokens.$bm-sem-space-75,
  '100': tokens.$bm-sem-space-100,
  '125': tokens.$bm-sem-space-125,
  '150': tokens.$bm-sem-space-150,
  '200': tokens.$bm-sem-space-200,
  '300': tokens.$bm-sem-space-300,
  '400': tokens.$bm-sem-space-400,
  '500': tokens.$bm-sem-space-500,
  '700': tokens.$bm-sem-space-700,
  '800': tokens.$bm-sem-space-800,
);

$CssDirections: (
  'before': 'inline-start',
  'after': 'inline-end',
  'top': 'block-start',
  'bottom': 'block-end',
  'm': 'margin',
  'p': 'padding',
  'x': (
    'inline-start',
    'inline-end',
  ),
  'y': (
    'block-start',
    'block-end',
  ),
  'gap': 'gap',
);

@mixin generateFullSpacingClasses($spaceTokens: $spaceTokens) {
  @each $beamName, $CssDirection in $CssDirections {
    @each $name, $value in $spaceTokens {
      // If the class needs to use multiple directions
      @if meta.type-of($CssDirection) == 'list' {
        .#{constants.$prefix}-p#{$beamName}-#{$name} {
          @each $direction in $CssDirection {
            padding-#{$direction}: $value !important;
          }
        }

        .#{constants.$prefix}-m#{$beamName}-#{$name} {
          @each $direction in $CssDirection {
            margin-#{$direction}: $value !important;
          }
        }
      }

      //if we want to remove all padding or margin
      @else if $beamName == 'p' or $beamName == 'm' {
        .#{constants.$prefix}-#{$beamName}-#{$name} {
          #{$CssDirection}: $value !important;
        }
      } @else if $beamName == 'gap' {
        .#{constants.$prefix}-#{$beamName}-#{$name} {
          #{$CssDirection}: $value !important;
        }
      }

      // If it is a single direction
      @else {
        .#{constants.$prefix}-p-#{$beamName}-#{$name} {
          padding-#{$CssDirection}: $value !important;
        }

        .#{constants.$prefix}-m-#{$beamName}-#{$name} {
          margin-#{$CssDirection}: $value !important;
        }
      }
    }
  }
}