import { easepick } from '@easepick/core'
import { RangePlugin } from '@easepick/range-plugin'

export default {
  displayDateRange (el) {
    // eslint-disable-next-line new-cap
    el.easepick = new easepick.create({
      element: el.firstElementChild,
      css: [
        'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css',
        'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css'
      ],
      plugins: [RangePlugin],
      RangePlugin: {
        elementEnd: el.lastElementChild,
        startDate: el.dataset.startDate,
        endDate: el.dataset.endDate
      },
      setup (picker) {
        picker.on('select', (e) => {
          el.firstElementChild.dispatchEvent(new Event('input', { bubbles: true }))
        })
      }
    })
  },
  mounted () { this.displayDateRange(this.el) },
  updated () { this.displayDateRange(this.el) }
}