<template>
  <div class="detail-container">
    <div class="main-pic-container">
      <div
        class="master-crop-section"
        :style="infoWidth"
      >
        <ui-button
          class="check-master-crop"
          type="secondary"
          button-type="button"
          :icon="masterCropEqualsOriginal | checkboxIcon"
          disable-ripple
          @click="handleMasterCropClick"
        >
          Master Crop = Original
        </ui-button>
        <ui-button
          v-if="!masterCropEqualsOriginal"
          class="edit-master-crop"
          type="secondary"
          button-type="button"
          icon="create"
          disable-ripple
          @click="setShowMasterCropper"
        >
          Edit Crop
        </ui-button>
      </div>
      <div
        v-if="toogleDetailCropper"
        class="detail-preview"
        :style="detailPreviewStyle"
      >
        <template v-if="supportsCropping">
          <module
            is="style"
            v-if="hasCropperImageDimensions"
          >
            .detail-preview::before {
            display: block;
            content: " ";
            opacity: 0.5;
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            width: {{ widthFromCropperDimensions }}px;
            height: {{ heightFromCropperDimensions }}px;
            background-image: url( {{ cropperBrackgroundAssetUrl }} );
            }
          </module>
          <Cropper
            v-if="hasCropperImageDimensions"
            :key="`cropper-${assetId}`"
            class="detail-preview--img master-crop-cropper"
            :src="cropperAssetUrl"
            :on-update="setCropGuide"
            :crop-guide="asset.cropGuide"
            :cropper-image-dimensions="cropperImageDimensions"
            :master-crop="asset.masterCrop"
          />
        </template>
        <div
          v-else
          class="detail-preview--img"
        >
          <img :src="previewAssetUrl">
        </div>
      </div>
      <div
        class="main-detail"
        :style="infoWidth"
      >
        <div class="main-info">
          <div>Created: {{ uploadDate | formatDate }}</div>
          <div>Modified: {{ modifiedDate | formatDate }}</div>
          <div>Dimensions: {{ formattedDimensions }}</div>
          <div>Uploaded by: {{ uploaderName || uploadedBy }}</div>
        </div>
        <div class="main-info">
          <div class="copy-image-url">
            Copy Image URL
            <copy-to-clipboard :text="formattedAssetUrl" />
          </div>
          <div>File Size: {{ kbytes }} KB</div>
          <div>File Type: {{ asset.mimetype }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import CopyToClipboard from 'Components/tools/CopyToClipboard.vue';
import Cropper from 'Components/tools/Cropper.vue';
import { calculateWidthHeight, getCropUrl } from 'Helpers/asset';

const { UiButton } = window.kiln.utils.components;

export default {
  components: {
    UiButton,
    CopyToClipboard,
    Cropper
  },
  filters: {
    formatDate(value) {
      return value ? new Date(value).toLocaleDateString() : null;
    },
    checkboxIcon(value) {
      return value ? 'check_box' : 'check_box_outline_blank';
    }
  },
  props: {
    asset: {
      type: Object,
      default: () => ({})
    },
    uploadedBy: {
      type: String,
      default: ''
    },
    uploaderName: {
      type: String,
      default: ''
    },
    formattedAssetUrl: {
      type: String,
      default: ''
    },
    assetId: {
      type: String,
      default: ''
    },
    modifiedDate: {
      type: Number,
      default: null
    },
    path: {
      type: String,
      default: ''
    },
    setCropGuide: {
      type: Function,
      default: () => {}
    },
    supportsCropping: {
      type: Boolean,
      default: true
    },
    toogleDetailCropper: {
      type: Boolean,
      default: true
    },
    uploadDate: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      cropperImageDimensions: {}
    };
  },
  computed: {
    infoWidth() {
      return { width: `${this.widthFromCropperDimensions || 560}px` };
    },
    widthFromCropperDimensions() {
      return (this.cropperImageDimensions || {}).width;
    },
    heightFromCropperDimensions() {
      return (this.cropperImageDimensions || {}).height;
    },
    detailPreviewStyle() {
      if (!this.hasCropperImageDimensions || this.masterCropEqualsOriginal) {
        return {};
      }

      const { width, height } = this.cropperImageDimensions;

      return {
        height: `${height}px`,
        width: `${width}px`
      };
    },
    masterCropEqualsOriginal() {
      return Object.keys(this.asset.masterCrop || {}).length === 0;
    },
    hasCropperImageDimensions() {
      return this.cropperImageDimensions && Object.keys(this.cropperImageDimensions).length;
    },
    formattedDimensions() {
      return `${this.asset.dimension.width} by ${this.asset.dimension.height}`;
    },
    cropperBrackgroundAssetUrl() {
      return this.path
        ? getCropUrl(this.path, { hasMasterCrop: true }) // set to true to always get original
        : '';
    },
    cropperAssetUrl() {
      return this.masterCropEqualsOriginal
        ? this.cropperBrackgroundAssetUrl
        : this.previewAssetUrl;
    },
    previewAssetUrl() {
      return this.path ? getCropUrl(this.path) : '';
    },
    kbytes() {
      return Math.round(this.asset.bytes / 1024);
    }
  },
  watch: {
    'asset.dimension': function updateCropperDimensions() {
      this.setCropperImageDimensions();
    }
  },
  mounted() {
    this.setCropperImageDimensions();
  },
  methods: {
    /**
     * Handles click on Master Crop icon
     */
    handleMasterCropClick() {
      this.masterCropEqualsOriginal
        ? this.setShowMasterCropper()
        : this.$emit('setNullMasterCrop');
    },
    setCropperImageDimensions() {
      const { width: originalWidth, height: originalHeight } = this.asset.dimension;

      this.cropperImageDimensions = calculateWidthHeight({ originalWidth, originalHeight }, 560);
    },
    /**
     * Sets the flag value to show master cropper
     */
    setShowMasterCropper() {
      this.$emit('setShowMasterCropper');
    }
  }
};
</script>
<style lang="scss" scoped>
  @import 'Styles/colors.scss';
  @import 'Styles/croppers.scss';
  @import 'Styles/helpers.scss';
  @import 'Styles/fonts.scss';

  .master-crop-cropper {
    /deep/ .cropper-wrap-box {
      outline: 1px solid $white;
    }
  }

  .detail-container {
    justify-content: center;
    margin: 0 3.3em 0 0;
    width: 560px;
  }

  .master-crop-section {
    margin: 0 auto 20px;

    .ui-button {
      height: inherit;
      padding: 0 1px;

      &:hover {
        background: none;
      }

      /deep/ .ui-button__content {
        font-weight: normal;
      }

      /deep/ .ui-button__icon {
        color: initial;
        margin-top: 0;
      }
    }

    .edit-master-crop {
      /deep/ .ui-button__content {
        font-size: 14px;
        font-weight: bold;
        color: $font-primary;
      }

      /deep/ .ui-icon {
        color: $font-primary;
      }
    }

    .check-master-crop {
      margin-right: 20px;
      font-size: $standard-font-size;
      text-transform: initial;
    }
  }

  .detail-preview {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-height: 560px;
    max-width: 560px;
    overflow: hidden;


    .detail-preview--img {
      max-height: 560px;
      max-width: 560px;
    }
  }

  .main-detail {
    color: $black;
    display: flex;
    flex: 100% 1 1;
    line-height: 1.4em;
    margin: 10px auto 0;

    .main-info {
      flex: 1;
      font-size: $small-font-size;
      line-height: 1.8;

      .copy-image-url {
        font-weight: bold;
      }
    }
  }

  .main-pic-container {
    display: flex;
    flex-direction: column;
  }
</style>
