import Vue from 'vue'
import App from './App'
import router from './router'

// Bootstrap 4 Core
import 'bootstrap/dist/css/bootstrap.min.css'

// Bootstrap-Vue
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Vue Switch
import ToggleButton from 'vue-js-toggle-button'

// Vue Toasted
import Toasted from 'vue-toasted'

// App Styles
import './styles/sass/app.scss'

// Store
import store from './store/index'

// VuMeter
import VuMeter from './components/VuMeter'

// MediaPlayer
import MediaPlayer from './components/MediaPlayer'

// Vue SlimScroll
import ScrollBar from 'vue2-scrollbar'

// Moment
import moment from 'moment'

// Font-Awesome
require('font-awesome/css/font-awesome.min.css')
Vue.use(ToggleButton)
Vue.use(Toasted, {
  theme: 'outline',
  position: 'top-right',
  duration: 1500,
  iconPack: 'fontawesome'
})
Vue.component('VuMeter', VuMeter)
Vue.component('MediaPlayer', MediaPlayer)
require('vue2-scrollbar/dist/style/vue2-scrollbar.css')
Vue.component('vue-scrollbar', ScrollBar)

// toDuration filter
Vue.filter('toDuration', (second) => {
  return moment.utc().startOf('day').seconds(second).format('mm:ss')
})

// Vue-devtools
Vue.config.productionTip = true

window.app = new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  },
  methods: {
    Toasted (title, message, type) {
      let icon = ''

      switch (type) {
        case 'success':
          icon = 'check-circle'
          break
        case 'error':
          icon = 'fa-exclamation-triangle'
          break
        case 'info':
          icon = 'fa-info-circle'
          break
        default:
          icon = 'fa-info-circle '
          type = 'info'
          break
      }
      this.$toasted.show(title, {
        icon: icon,
        className: type,
        action: {
          text: message,

          onClick: (e, toastObject) => {
            toastObject.goAway(0)
          }
        }
      })
    }
  }
})
