/**
 * {}
 * @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/dock.js'
import './components/topbar.js'
import './components/about.js'

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

  styles: css`
    :host {
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(ellipse, var(--color-red-a), transparent),
        radial-gradient(ellipse at bottom, var(--color-teal-a), transparent),
        linear-gradient(
          160deg,
          var(--color-blue-a),
          rgba(255, 255, 255, 0.3),
          var(--color-blue-1)
        );
    }
    :host::before,
    :host::after {
      position: fixed;
      bottom: -100px;
      display: block;
      width: 1280px;
      height: 480px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      content: '';
    }
    :host::before {
      left: -256px;
      transform: rotate(30deg);
    }
    :host::after {
      right: -144px;
      bottom: -160px;
      width: 960px;
      transform: rotate(-30deg);
    }
    .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()