<template>
  <div class="hotpay-image" :class="classes">
    <div class="hotpay-image-crop" :style="cropStyles">
      <img ref="image" :src="data.url" :alt="data.description" :class="{ full }" :style="imageStyles" @load="generateCropStyles">
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-image {
    max-width: 100%;
    margin: 0 auto 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 7px;
    text-align: center;
  }

  img {
    &.full {
      min-width: 100%;
      min-height: 100%;
    }
  }

  .crop-default {
    img {
      width: 100%;
      max-width: none;

      &.full {
        min-width: 100%;
        min-height: 100%;
        width: auto;
      }
    }
  }

  .size-small {
    .hotpay-image-crop {
      width: 25%;
    }
  }

  .size-medium {
    .hotpay-image-crop {
      width: 50%;
    }
  }

  .size-large {
    .hotpay-image-crop {
      width: 70%;
    }
  }

  .size-full {
    .hotpay-image-crop {
      width: 100%;
    }
  }

  .hotpay-image-crop {
    max-width: 100%;
    position: relative;
    display: inline-block;

    img {
      position: static;
    }
  }

  .crop-square,
  .crop-landscape,
  .crop-portrait,
  .crop-rounded {
    .hotpay-image-crop {
      overflow: hidden;
    }

    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
  }

  .crop-landscape {
    img {
      width: 100%;
      height: auto;
      max-height: none;
    }
  }

  .crop-portrait {
    img {
      height: 100%;
      width: auto;
      max-width: none;
    }
  }

  .crop-square,
  .crop-rounded {
    img {
      min-height: 100%;
      min-width: 100%;
      max-width: none;
      max-height: none;
    }
  }

  .crop-rounded {
    .hotpay-image-crop {
      border-radius: 50%;
    }
  }
</style>

<script>
  export default {
    name: 'hotpay-image',
    props: {
      data: Object,
      full: Boolean
    },
    data: () => ({
      sizeScales: {
        small: 50,
        medium: 75,
        large: 100,
        full: 100,
        default: 100
      },
      cropStyles: {},
      imageStyles: {}
    }),
    watch: {
      data: {
        deep: true,
        handler () {
          this.generateCropStyles()
        }
      }
    },
    computed: {
      classes () {
        return [
          'crop-' + this.data.frame,
          'size-' + this.data.size
        ]
      }
    },
    methods: {
      generateCropStyles () {
        const resizeFactor = this.sizeScales[this.data.size] / 100
        let cropStyles = {}
        let referHeight = this.data.image.height
        let referWidth = this.data.image.width

        if (this.data.size === 'full' && this.$el) {
          referHeight = this.$el.offsetHeight
          referWidth = this.$el.offsetWidth
        }

        if (this.data.frame === 'portrait') {
          cropStyles = {
            width: referHeight / (16 / 9) * resizeFactor + 'px',
            height: referHeight * resizeFactor + 'px'
          }
        } else if (this.data.frame === 'landscape') {
          cropStyles = {
            width: referWidth * resizeFactor + 'px',
            height: referWidth / (16 / 9) * resizeFactor + 'px'
          }
        } else if (this.data.frame === 'square' || this.data.frame === 'rounded') {
          referHeight = this.$el.offsetWidth
          referWidth = this.$el.offsetWidth

          if (this.$refs.image && this.$refs.image.offsetWidth > this.$refs.image.offsetHeight) {
            this.imageStyles = {
              height: '100%'
            }
          } else {
            this.imageStyles = {
              width: '100%'
            }
          }

          cropStyles = {
            width: referHeight * resizeFactor + 'px',
            height: referHeight * resizeFactor + 'px'
          }
        }

        this.cropStyles = cropStyles
      }
    }
  }
</script>
