/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/11/14 18:52:57
 */

import { createApp } from 'wkitd'
import { css, html } from 'wkit'

import 'es.shim'
import '@ui/base/button.js'
import '@ui/base/link.js'
import '@ui/form/input.js'
import '@ui/form/switch.js'
import '@ui/modal/layer.js'
import '@ui/nav/pager.js'

import router from './router.js'
import store from './store.js'
import fetch from '/lib/fetch.js'

import './components/header.js'
import './components/footer.js'

const app = createApp({
  render() {
    return html`
      <wc-header></wc-header>
      <div class="main-body"><router-view></router-view></div>
      <wc-footer></wc-footer>
    `
  },

  styles: css`
    :host {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 100vh;
    }
    .main-body {
      flex: 1;
    }
  `,

  mounted() {
    var user = localStorage.getItem('user')
    var checked = sessionStorage.getItem('session_checked')

    if (user) {
      if (checked) {
        return (this.$store.user = JSON.parse(user))
      }
      fetch('/login/check')
        .then(r => {
          localStorage.setItem('token', r.data.token)
          sessionStorage.setItem('session_checked', 1)
          this.$store.user = JSON.parse(user)
        })
        .catch(r => {
          localStorage.removeItem('token')
          localStorage.removeItem('user')
        })
    }
  }
})

app.use(router).use(store).mount('.app')