// import Zoomist styles
import 'zoomist/css'
// import Zoomist
import Zoomist from 'zoomist'

// initialize
const zoomist = new Zoomist(...)

const zoomist = new Zoomist('.zoomist-container', {
  // Optional parameters
  maxScale: 4,
  bounds: true,
  // if you need slider
  slider: true,
  // if you need zoomer
  zoomer: true
})

new Zoomist('.zoomist-container', {
  // set is draggable or not
  draggable: true,
  // set is wheelable or not
  wheelable: true,
  // set is pinchable or not
  pinchable: true,
  // set image stuck on bounds
  bounds: true,
  // the ratio of zooming at one time
  zoomRatio: 0.1,
  // the max scale of zoomist-image (must be number larger then initScale)
  maxScale: 10,
  // the min scale of zoomist-image (must be number smaller then initScale)
  minScale: 1,
  // set initial scale of zoomist-image
  initScale: null,
  // zoomist slider module
  slider: {
    // the css selector string or a element of the slider
    el: null,
    // the direction of the slider 'horizontal' or 'vertical'
    direction: 'horizontal'
  },
  //
  zoomer: {
    // the wrapper of all zoomer buttons
    el: null,
    // the css selector string or a element for in-zoomer
    inEl: null,
    // the css selector string or a element for out-zoomer
    outEl: null,
    // the css selector string or a element for reset-zoomer
    resetEl: null,
    // in zoomer and out zoomer will be disabled when image comes to maximin or minimum
    disabledClass: 'zoomist-zoomer-disabled'
  }
})

const zoomist = new Zoomist(...)

zoomist.zoom(ratio)
zoomist.zoomTo(ratio)
zoomist.move({ x, y })
zoomist.moveTo({ x, y })
zoomist.slideTo(value)
zoomist.reset()
zoomist.update(options)
zoomist.destroy(cleanStyle)
zoomist.destroySlider()
zoomist.destroyZoomer()
zoomist.destroyModules()

zoomist.on(event, handler)

zoomist.getImageData()
zoomist.getContainerData()
zoomist.getSliderValue()

// Using on parameter before initialization.
const zoomist = new Zoomist('.zoomist-container', {
  on: {
    // invoked when zoomist instance ready
    ready(zoomist) {...},
    // invoked when reset methods be used
    reset(zoomist) {...},
    // invoked when image changes it's size
    resize(zoomist) {...},
    // invoked before destroy methods be used
    beforeDestroy(zoomist) {...},
    // invoked after destroy methods be used
    destroy(zoomist) {...},
    // invoked before update methods be used
    beforeUpdate(zoomist) {...},
    // invoked when update methods be used
    update(zoomist) {...},
    // invoked when image is zooming
    zoom(zoomist, scale) {...},
    // invoked when wheeling
    wheel(zoomist, scale, event) {...},
    // invoked when mousedown on wrapper
    dragStart(zoomist, transform, event) {...},
    // invoked when dragging the image
    drag(zoomist, transform, event) {...},
    // invoked when mouseup on wrapper
    dragEnd(zoomist, transform, event) {...},
    // invoked when mousedown on wrapper
    pinchStart(zoomist, scale, event) {...},
    // invoked when pinching the image
    pinch(zoomist, scale, event) {...},
    // invoked when mouseup on wrapper
    pinchEnd(zoomist, scale, event) {...},
    // invoked when mousedown on slider
    slideStart(zoomist, value, event) {...},
    // invoked when sliding the slider
    slide(zoomist, value, event) {...},
    // invoked when mouseup on slider
    slideEnd(zoomist, value, event) {...}
  }
})

// Using on method after initialization.
// For example:
zoomist.on('zoom', (zoomist, scale) => {...})