import Chart from 'chart.js'
import 'file-drop-element'
import { saveAs } from 'file-saver'

const fileDrop = document.getElementById('file-drop')
const dlButton = document.getElementById('download')
const canvas = document.getElementById('myChart')
const ctx = canvas.getContext('2d')
let filename
let chart = new Chart(ctx)

const trimExtension = filename =>
  filename
    .split('.')
    .slice(0, -1)
    .join('.')

async function readFile(file) {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsText(file)
    reader.onload = function() {
      resolve(this.result)
    }
  })
}

function displayDownLoadButton() {
  dlButton.style.display = 'block'
}

fileDrop.addEventListener('filedrop', e => {
  filename = e.files[0].name
  if (chart) chart.destroy()
  readFile(e.files[0])
    .then(JSON.parse)
    .then(config => (chart = new Chart(ctx, config)))
    .then(displayDownLoadButton)
})

dlButton.addEventListener('click', () => {
  canvas.toBlob(blob => saveAs(blob, trimExtension(filename) + '.png'))
})