/**
 * {}
 * @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 Icon from '@ui/base/icon.js'
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/views/tag.js'
import '@ui/nav/pager.js'

import extIcons from '/lib/ext-icon.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 './views/about.js'
import './views/power.js'

Icon.extend(extIcons)

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>
      <wc-power></wc-power>
    `
  },

  styles: css`
    :host {
      display: flex;
      flex-direction: column;
      width: 100vw;
      min-width: 1024px;
      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::after {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 75px;
      background: url(/assets/img/cat.svg) no-repeat;
      content: '';
    }
    .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()