<template>
  <div :class="classHandler">
    <h2 class="cropper-view--title">
      {{ title }}
    </h2>
    <div class="cropper-view--cropper-container">
      <slot name="options" />
      <div class="cropper-view--img-container">
        <transition
          name="cropper-view--fade"
          mode="out-in"
        >
          <Cropper
            v-if="aspectRatio"
            ref="cropper"
            :key="`cropper-${aspectRatio}-${cropGuideLength}-${refreshKey}`"
            :src="previewAssetUrl"
            :aspect-ratio="aspectRatio"
            :crop-guide="cropGuide"
            :cropper-image-dimensions="cropperImageDimensions"
            :on-update="updateCropGuide"
            :original-dimensions="originalDimensions"
          />
        </transition>
      </div>
      <div class="cropper-view--actions">
        <ui-button
          v-if="resetButton"
          class="cropper-view--actions-button cropper-view--actions__reset"
          :disabled="!resetStatus"
          icon="refresh"
          type="secondary"
          button-type="button"
          @click="reset"
        >
          Reset Crop
        </ui-button>
        <ui-button
          type="primary"
          color="default"
          class="cropper-view--actions-button cropper-view--actions__cancel"
          :disabled="!cancelStatus"
          button-type="button"
          @click="$emit('closeView')"
        >
          Cancel
        </ui-button>
        <ui-button
          color="accent"
          class="cropper-view--actions-button cropper-view--actions__save"
          :disabled="!saveStatus"
          button-type="button"
          @click="$emit('saveChanges')"
        >
          Save Changes
        </ui-button>
      </div>
    </div>
  </div>
</template>
<script>

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

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

export default {
  components: {
    Cropper,
    UiButton
  },
  props: {
    aspectRatio: {
      type: Number,
      default: 1
    },
    cancelInitialStatus: {
      type: Boolean,
      default: false
    },
    classHandler: {
      type: String,
      default: ''
    },
    cropGuide: {
      type: Object,
      default: () => ({
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      })
    },
    originalDimensions: {
      type: Object,
      default: () => ({})
    },
    resetButton: {
      type: Boolean,
      default: false
    },
    resetInitialStatus: {
      type: Boolean,
      default: false
    },
    saveInitialStatus: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'Editing'
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cancelStatus: this.cancelInitialStatus,
      resetStatus: this.resetInitialStatus,
      saveStatus: this.saveInitialStatus,
      refreshKey: false,
      cropperImageDimensions: null
    };
  },
  computed: {
    previewAssetUrl() {
      return this.src
        ? getCropUrl(this.src, {})
        : '';
    },
    cropGuideLength() {
      return Object.keys(this.cropGuide).length;
    }
  },
  watch: {
    cancelInitialStatus(val) {
      this.cancelStatus = val;
    },
    resetInitialStatus(val) {
      this.resetStatus = val;
    },
    saveInitialStatus(val) {
      this.saveStatus = val;
    }
  },
  mounted() {
    const { originalWidth, originalHeight } = this.originalDimensions;

    this.cropperImageDimensions = calculateWidthHeight({ originalWidth, originalHeight }, 920);
  },
  methods: {
    /**
     * Resets the crop to null and enables save button
     */
    reset() {
      this.$emit('resetChanges', null);
      this.saveStatus = true;
      this.resetStatus = false;
      this.refreshKey = !this.refreshKey;
    },
    /**
     * Updates crop guide to the specified by user, and enables save and reset buttons
     * @param {Object} newCropGuide Details of new crop guide
     */
    updateCropGuide(newCropGuide) {
      this.$emit('newCropGuide', normalizeCropGuideValues(newCropGuide));
      this.saveStatus = true;
      this.resetStatus = true;
    }
  }
};
</script>
<style lang="scss" scoped>
  @import 'Styles/colors.scss';
  @import 'Styles/croppers.scss';
  @import 'Styles/fonts.scss';
  @import 'Styles/helpers.scss';

  .cropper-view {
    &--title {
      @extend .cropper-title;

      color: $border-color-darker;
      margin: 0 0 40px;
    }

    &--img-container {
      max-height: 920px;
      max-width: 920px;
    }

    &--cropper-container {
      width: fit-content;
      width: -moz-fit-content;
    }

    &--actions {
      display: flex;
      justify-content: flex-end;
      padding-top: 20px;
    }

    &--actions-button {
      font-size: 14px;
    }

    &--actions__cancel {
      margin-right: 20px;
    }

    &--actions__reset {
      margin-right: auto;
      padding: 0;

      /deep/ .ui-button__icon {
        margin-top: 0;
        transform: scale(-1, 1);

        .ui-icon {
          color: $black;
        }
      }
    }

    &--fade-enter-active,
    &--fade-leave-active {
      transition: opacity 0.25s ease-in-out;
    }
  }

  @keyframes cropper-view--fade-in-out {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
</style>
