<template>
  <div id="app">
    <loading ref="loading" />
    <transition name="page" mode="out-in">
      <component :is="layout" v-if="layout" />
    </transition>
  </div>
</template>

<script>
    import Loading from './Loading'

    // Load layout components dynamically.
    const requireContext = require.context('~/layouts', false, /.*\.vue$/)

    const layouts = requireContext.keys()
        .map(file =>
            [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
        )
        .reduce((components, [name, component]) => {
            components[name] = component.default || component
            return components
        }, {})

    export default {
        el: '#app',

        components: {
            Loading
        },

        data: () => ({
            layout: null,
            defaultLayout: 'default'
        }),

        metaInfo () {
            const appName = process.env.VUE_APP_NAME

            return {
                title: appName,
                titleTemplate: `%s · ${appName}`
            }
        },

        mounted () {
            this.$loading = this.$refs.loading
        },

        methods: {
            /**
             * Set the application layout.
             *
             * @param {String} layout
             */
            setLayout (layout) {
                if (!layout || !layouts[layout]) {
                    layout = this.defaultLayout
                }

                this.layout = layouts[layout]
            }
        }
    }
</script>