import RecoImageEditor from '@/components/complex/RecoImageEditor.vue';

/*
* Builds image editor modal
* -----------------------------------------------------------
* self object needs to contain the following reactive keys:
*  - images
*  - imageDimensions
*  - imageEditorModal
*/

export default (self, animations, callbacks) => {
	return self.$ionic.modalController.create({
      component: RecoImageEditor,
      enterAnimation: animations.enterAnimation,
      leaveAnimation: animations.leaveAnimation,
      componentProps: {
        propsData: {
          backButtonClicked: callbacks.backButtonClicked ? callbacks.backButtonClicked : () => { return },
	        doneButtonClicked: callbacks.doneButtonClicked ? callbacks.doneButtonClicked : () => { return },
	        withBackButton: callbacks.backButtonClicked ? true : false,
	        withDoneButton: callbacks.doneButtonClicked ? true : false,
        },
        mounted() {
          this.images = self.images;
          this.imageURLs = self.imageURLs;
          this.imageDimensions = self.imageDimensions;
          console.log(self.imageURLs);
          setTimeout(() => (this.isLoaded = true), 300);
          setTimeout(() => this.$refs.ionSlider.slideTo(this.imageURLs.length), 600);
        },
        methods: {
          setImages(images, imageURLs, dimensions) {
            self.images = images;
            self.imageURLs = imageURLs;
            self.imageDimensions = dimensions;
          }
        }
      },
    })
    .then(m => {
      self.imageEditorModal = m;
      self.imageEditorModal.present();
    })
}