import { Fragment } from 'vue-fragment'

import '../../../src/css/colors.css'

import './style.css'

const BODY_CLASS = 'body-style'
const DARK_THEME_CLASS = 'dark-mode'

export default {
  components: {
    Fragment,
  },

  props: {
    isDarkMode: Boolean,
  },

  watch: {
    isDarkMode: {
      immediate: true,
      handler(newVal) {
        document.body.classList[newVal ? 'add' : 'remove'](DARK_THEME_CLASS)
      },
    },
  },

  mounted() {
    document.body.classList.add(BODY_CLASS)
  },

  beforeDestroy() {
    document.body.classList.remove(DARK_THEME_CLASS, BODY_CLASS)
  },

  render(h) {
    return h(Fragment, this.$slots.default)
  },
}
