<template>
  <div class="theme-container">
    <div class="container">
      <header class="header">
        <HeaderBar />
      </header>

      <main class="main">
        <transition appear name="page">
          <DefaultGlobalLayout :key="$route.fullPath" />
        </transition>
      </main>

      <footer class="footer">
        <FooterBar />
      </footer>
    </div>

    <transition appear name="fade">
      <Search @closeClick="closeSearch" v-if="showSearch" />
    </transition>
  </div>
</template>

<script>
import Vue from 'vue';
import DefaultGlobalLayout from '@app/components/GlobalLayout';
import HeaderBar from '@theme/components/header-bar/HeaderBar';
import Search from '@theme/components/search/Search';
import store from '@theme/store';

export default {
  name: 'GlobalLayout',
  components: {
    DefaultGlobalLayout,
    HeaderBar,
    Search,
  },

  provide() {
    return {
      $router: this.$router,
      $posts: this.$allPosts,
      $category: this.$category,
      $tag: this.$tag,
    };
  },

  computed: {
    showSearch() {
      return store.showSearch;
    },
  },

  mounted() {
    import('../assets/icon')

    import('fastclick').then((FastClick) => {
      document.addEventListener(
        'DOMContentLoaded',
        () => {
          FastClick.attach(document.body);
        },
        false
      );
    });
  },

  watch: {
    $route() {
      this.closeSearch();
    },
  },

  methods: {
    closeSearch() {
      store.showSearch = false;
    },
  },
};
</script>

<style lang="stylus">
#app {
  height: 100%;
}
</style>

<style lang="stylus" scoped>
@import '~@theme/styles/_mixins.styl';

.theme-container {
  position: relative;
  height: 100%;

  .container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 120px 1fr 100px;
    grid-template-areas: 'header';
    'main';
    'footer';
    margin: 0 auto;
    padding: 0 space(2);
    max-width: $appWidth;
    height: 100%;
  }

  .header, .footer {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .main {
    position: relative;
    z-index: 0;
  }

  .page-enter-active, .page-leave-active {
    opacity: 1;
    transition: all duration(3) $base.ease;
    transform: translateY(0px);
  }

  .page-leave-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .page-enter, .page-leave-to {
    opacity: 0;
  }

  .page-enter {
    transform: translateY(10px);
  }

  .fade-enter-active, .fate-leave-active {
    opacity: 1;
    transition: all duration(3) $base.ease;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
}
</style>
