@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";
@import "../../styles/media";

@mixin setMediaFit($param: auto){
  @if ($param == 'cover' or $param == 'contain' or $param == 'fill') {
    &--fit-#{$param} {
      object-fit: $param;
    }
  } @else {
    &--fit-#{$param} {
      height: $param;
      width: $param;
    }
  }
}

$mediaSizes: (
  "sm": 9,
  "md": 14,
  "lg": 36,
  "xl": 66
);

$mediaRatioValues: auto full ratio-16-9 ratio-4-3 ratio-3-4 ratio-9-16;

@mixin setMediaSize($sizing:4, $sizes:$mediaSizes) {
  @for $i from 1 to length($sizes)+1 {
    $size: nth(map-values($sizes), $i) * $sizing;
    &--size-#{nth(map-keys($sizes), $i)} {
      --media-size: #{$size+'px'};
    }
  }
}

@mixin calculateSize($size, $withRatio: 1, $heightRatio: 1) {
  --local-width: #{$withRatio};
  --local-height: #{$heightRatio};
  --local-size: #{$size};
  @if ($withRatio > $heightRatio) {
    min-width: $size;
    height: calc(var(--local-size) * var(--local-height) / var(--local-width));
  } @else if ($withRatio < $heightRatio) {
    min-width: calc(var(--local-size) * var(--local-width)  / var(--local-height));
    height: $size;
  } @else {
    min-width: #{$size};
    height: #{$size};
  }
}

@mixin mediaRatio(){
  @for $i from 1 to length($mediaRatioValues)+1 {
    &--ratio-#{nth($mediaRatioValues, $i)} {
      $ratioType: #{nth($mediaRatioValues, $i)};
      $size: calc(var(--media-size));
      @if $ratioType == full {
        @include calculateSize(calc(var(--media-size) + var(--media-padding)));
        padding: 0;
      } @else if ($ratioType == ratio-16-9) {
        @include calculateSize($size, 16, 9);
      } @else if ($ratioType == ratio-4-3) {
        @include calculateSize($size, 4, 3);
      } @else if ($ratioType == ratio-3-4) {
        @include calculateSize($size, 3, 4);
      } @else if ($ratioType == ratio-9-16) {
        @include calculateSize($size, 9, 16);
      } @else {
        @include calculateSize($size);
      }
    }
  }
}

@mixin mediaAlign(){
  @at-root .one-ui-wrapper--direction-column > & {
    &--align {
      &-center {
        margin: 0 auto;
      }
      &-end {
        margin-left: auto;
      }
      &-start {
        margin-right: auto;
      }
    }
  }
  @at-root .one-ui-wrapper--direction-row > & {
    &--align {
      &-center {
        margin: auto 0;
      }
      &-end {
        margin-top: auto;
      }
      &-start {
        margin-bottom: auto;
      }
    }
  }
}

.one-ui-media {

  :root {
    --media-size: 0px;
    --media-height: 0px;
    --media-width: 0px;
    --media-padding: 0px;
  }
  position: relative;
  @include setColor();
  @include setSize(padding, --media-padding);
  @include setMediaSize();
  @include mediaRatio();
  @include setMargin();
  @include setRadius();
  @include mediaAlign();

  &__image-placeholder {
    position: absolute;
    opacity: 1;
    z-index: 1;
    &--hide {
      opacity: 0;
      z-index: 0;
    }
  }
}