@use 'sass:math';
@import './functions';
@import './variables';

@mixin use-breakpoint($value) {
  @if $value != nth(map-keys($breakpoints), 1) {
    @media (min-width: #{map-get($breakpoints, $value)}px) {
      @content;
    }
  }
}

@mixin fullcover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@mixin flexbox() {
  display: flex;
  flex-wrap: wrap;
}

@mixin maxsize() {
  width: 100%;
  max-width: 100%;
}

@mixin mx-auto {
  margin-left: auto;
  margin-right: auto;
}

@mixin mx-custom($space) {
  margin-left: $space;
  margin-right: $space;
}

@mixin my-custom($space) {
  margin-top: $space;
  margin-bottom: $space;
}

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin align-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
  }
}

@mixin safe-modal($base: 75vmin, $pos: absolute) {
  position: $pos;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $base;
}

@mixin full-breakout($pos: relative, $width: 100vw) {
  position: $pos;
  width: $width;
  left: 50%;
  right: 50%;
  margin-left: math.div(-$width,2);
  margin-right: math.div(-$width,2);
}

@mixin photofix {
  position: relative;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@mixin aspect-ratio($ratio: 9/16) {
  position: relative;
  width: 100%;
  &::before {
    display: block;
    padding-top: calc(#{$ratio} * 100%);
    content: '';
  }
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin generate-class-utils($class-utils) {
  @each $class-key, $class in $class-utils {
    $prefix: map-get($class, 'class');
    $property: map-get($class, 'property');
    $properties: map-get($class, 'properties');
    $values: map-get($class, 'values');
    $responsive: map-get($class, 'responsive');
  
    $property-type: type-of($property);
    $properties-type: type-of($properties);
    $values-type: type-of($values);
  
    // [values]: list
    @if $values-type == 'list' {
      @each $i in $values {
        @if $property-type == 'list' {
          @each $prop in $property {
            .#{nth($prefix, index($property, $prop))}-#{$i} {
              #{$prop}: $i;
            }
          }
        }
        @else if $properties-type == 'list' {
          .#{$prefix}-#{$i} {
            @each $prop in $properties {
              #{$prop}: $i;
            }
          }
        }
        @else {
          .#{$prefix}-#{$i} {
            #{$property}: $i;
          }
        }
      }
      @if $responsive {
        @each $query, $_ in $breakpoints {
          @include use-breakpoint($query) {
            @each $i in $values {
              @if $property-type == 'list' {
                @each $prop in $property {
                  .#{nth($prefix, index($property, $prop))}-#{$query}-#{$i} {
                    #{$prop}: $i;
                  }
                }
              }
              @else if $properties-type == 'list' {
                .#{$prefix}-#{$query}-#{$i} {
                  @each $prop in $properties {
                    #{$prop}: $i;
                  }
                }
              }
              @else {
                .#{$prefix}-#{$query}-#{$i} {
                  #{$property}: $i;
                }
              }
            }
          }
        }
      }
    }
  
    // [values]: map
    @else if $values-type == 'map' {
      @each $key, $value in $values {
        @if $property-type == 'list' {
          @each $prop in $property {
            .#{nth($prefix, index($property, $prop))}-#{$key} {
              #{$prop}: $value;
            }
          }
        }
        @else if $properties-type == 'list' {
          .#{$prefix}-#{$key} {
            @each $prop in $properties {
              #{$prop}: $value;
            }
          }
        }
        @else {
          .#{$prefix}-#{$key} {
            #{$property}: $value;
          }
        }
      }
      @if $responsive {
        @each $query, $_ in $breakpoints {
          @include use-breakpoint($query) {
            @each $key, $value in $values {
              @if $property-type == 'list' {
                @each $prop in $property {
                  .#{nth($prefix, index($property, $prop))}-#{$query}-#{$key} {
                    #{$prop}: $value;
                  }
                }
              }
              @else if $properties-type == 'list' {
                .#{$prefix}-#{$query}-#{$key} {
                  @each $prop in $properties {
                    #{$prop}: $value;
                  }
                }
              }
              @else {
                .#{$prefix}-#{$query}-#{$key} {
                  #{$property}: $value;
                }
              }
            }
          }
        }
      }
    }

    // [values]: string
    @else if $values-type == 'string' {
      @if $property-type == 'list' {
        @each $prop in $property {
          .#{nth($prefix, index($property, $prop))} {
            #{$prop}: $values;
          }
        }
      }
      @else if $properties-type == 'list' {
        .#{$prefix} {
          @each $prop in $properties {
            #{$prop}: $values;
          }
        }
      }
      @else {
        .#{$prefix} {
          #{$property}: $values;
        }
      }
      @if $responsive {
        @each $query, $_ in $breakpoints {
          @include use-breakpoint($query) {
            @if $property-type == 'list' {
              @each $prop in $property {
                .#{nth($prefix, index($property, $prop))}-#{$query} {
                  #{$prop}: $values;
                }
              }
            }
            @else if $properties-type == 'list' {
              .#{$prefix}-#{$query} {
                @each $prop in $properties {
                  #{$prop}: $values;
                }
              }
            }
            @else {
              .#{$prefix}-#{$query} {
                #{$property}: $values;
              }
            }
          }
        }
      }
    }
  }
}