<template>
  <div>
    <h4>Center point</h4>
    <p>
      Geef hier aan waar zich de belangrijkste details van de afbeelding bevinden. Bij een portret is dat bijvoorbeeld het gezicht of de
      ogen. Bij een landschap kan dat bijvoorbeeld een specifiek deel van de afbeelding zijn. Bij het tonen van de afbeelding wordt er
      zoveel mogelijk rekening gehouden dat dit gedeelte zichtbaar is.
    </p>
    <div class="asset-detail-center-point" v-if="imageUrl">
      <div class="card form-group">
        <div class="card-body">
          <div class="center-point-wrapper">
            <div class="image-wrapper">
              <img :src="imageUrl" v-on:click="handleCenterPointClick" ref="img" class="image" draggable="false" />
              <div
                v-if="relativeCenterPoint"
                class="center-point"
                :style="{ left: relativeCenterPoint.x + '%', top: relativeCenterPoint.y + '%' }"
              >
                <span />
              </div>
            </div>
            <div class="backdrop" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.asset-detail-center-point {
  display: inline-block;
  width: 100%;
}

.center-point {
  position: absolute;

  span {
    position: absolute;
    top: -20px;
    left: -20px;
    height: 40px;
    width: 40px;
    z-index: 1;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTEtMDVUMTU6MjI6NTgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTExLTA2VDEzOjU0OjUxKzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTExLTA2VDEzOjU0OjUxKzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM3ZWQwMGI0LTUyYTgtNDFiZC05YTRhLTM4ZDQ4NjgxNWNlMSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmVkMjI1NGYzLWNkNzYtZDM0ZC1hNmE5LTI0NjNmMzZmZWE0NSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjg0ZGIwNDU4LWMyNDMtNDJkYi05YWI4LTBiYWNiMmY0NDMzNiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODRkYjA0NTgtYzI0My00MmRiLTlhYjgtMGJhY2IyZjQ0MzM2IiBzdEV2dDp3aGVuPSIyMDE5LTExLTA1VDE1OjIyOjU4KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MzdlZDAwYjQtNTJhOC00MWJkLTlhNGEtMzhkNDg2ODE1Y2UxIiBzdEV2dDp3aGVuPSIyMDE5LTExLTA2VDEzOjU0OjUxKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ZRm7WAAADb0lEQVRYhc2ZS2hdVRSGv3uL9JEY7ItKQqxaU1usVKxgrJOIOjAoqCOlDmwRnFgHzhxaB6Ii4lu0UKw1giNB1A4UIdCiggMrSlsySGN9tEWjNU1T2vo52OuQk5vT5D6SHH9YrHuy1+PL4Zx99963otKktgB3AL3AjcBaYHGMnQdGgB+Ab4CvwjesSoOA3cA24FHg+oLxcUCgrWBsGNgDDABDdXdU67HL1OedqsPqc+p9ao/anotfpq5T71F3qYdqcl9V2+rpXQ/c/erxXPHX1N46/7G83ay+mKvzp/pIq4C7cgU/Uq9rAqzWutT3cnVfaRZwIFfkoTkAq7V71XNR/9NGAT+MxJPq5nmAy2ydOjQTZFHSs5Ewqq6ZR7jMlqnHouebswHe7aQ2LgBcZl3qmeg75XGqDRyNoAcWEC6zvuh9Xl1aBPhCBHxWAlxme4NhX/a37JtkFXAq5u41wMm6Z/q51RJgNPw1wHA1BnaEf5fy4AAmgJfi806Y/C4+BlwF3AD8VArapLqA48AY0FEFNpHghikfDuAX4FugHeirAv0x8H5pSNO1L3x/FbgtLg6UBFOkr8NvrQKb4+JISTBFOhx+Y5X0/AGcaLHoTaSV8yBwe4u1/gHOAssrptd4AljaYtFDpKU/wG9AZ4v1RoDubB5semOS05JLfG5WAlSBf0l3b/GM4bNrB/A98CPwcIu1AFZCmqizSXot6bb+H9RGmqj/rpKeHYCe8nimKWM5UgUOxkWrb95cqjf8wSqwPy62lQRTpIxlf7ZY+J20zOqhkU31/Gg1aUU1AVyeTTNvh3+iFKSpeiz8HuBCdgc7SauIi8AK4HQ5bFSAv4AOYAPxkgD8CrwFLAJ2l4KW9AYJ7mOytUFuP7BIPRt7gjtL2I9scVIdRZsm1AcjYELtXkC4K0yHBKqP58eKgl+PwBHTpnohALPTr4HasUslfB4JQ+rV8wi2Wv0ueh0oipkp+ZNIHFf75wGuTz0RPQbVSqOAmM4CM72jrpoDsHb15VzdvTPF11NwuzoWxS6oz6gbmgC7Vn1aPR21Lqo7Z8urt/gKdbdTNag+pW5VVxbkLFdvVZ9Uv6jJ/UDtrKd3o3dhk+ms+g+na1z92fT2jxWMnzGdpt7SSM9GT/kzVYC7wnqB9cCVNTGngKOknx++DDvXaKP/ALexTZDUVQSAAAAAAElFTkSuQmCC');
  }
}
.image-wrapper {
  position: relative;
  display: inline-block;
}
.center-point-wrapper {
  text-align: center;
  position: relative;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: black;
  opacity: 0.5;
}

img {
  cursor: pointer;
  max-width: 600px;
}
</style>

<script>
import { ValueSyncMixin } from '../shared/value-sync-mixin.js';

export default {
  name: 'asset-detail-center-point',
  mixins: [ValueSyncMixin],
  props: ['asset', 'imageUrl', 'value'],
  computed: {
    relativeCenterPoint() {
      if (this.asset && this.valueCopy) {
        return {
          x: (this.valueCopy.x / this.asset.width) * 100,
          y: (this.valueCopy.y / this.asset.height) * 100
        };
      }
      return null;
    }
  },
  methods: {
    handleCenterPointClick(e) {
      const rect = this.$refs.img.getBoundingClientRect();
      const scale = this.asset.width / rect.width;
      const { offsetX, offsetY } = e;
      const x = Math.round(offsetX * scale);
      const y = Math.round(offsetY * scale);

      this.valueCopy = {
        x,
        y
      };
    }
  }
};
</script>
