/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/12/19 16:53:27
 */

import { html, css, Component } from 'wkit'
import { watch } from 'wkitd'

import './titlebar.js'

class About extends Component {
  static animation = { type: 'scale' }

  static styles = [
    css`
      :host {
        display: flex;
        position: fixed;
        left: calc(50vw - 360px);
        top: calc(50vh - 280px);
        z-index: 2;
        width: 720px;
        height: 560px;
        font-size: 14px;
        color: var(--color-dark-1);
        -webkit-user-select: none;
        user-select: none;
      }

      .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.93);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
      }
    `,
    css`
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 32px 64px;
        line-height: 1.5;
      }

      .name {
        font: 64px/2 'Sol Thin';
      }
      a {
        text-decoration: none;
        color: var(--color-blue-1);
      }
      summary {
        text-indent: 2em;
      }
      .holder {
        flex: 1;
      }
    `
  ]

  #hide() {
    this.$store.aboutAppShow = false
  }

  mounted() {
    watch('$store.aboutAppShow', v => {
      this.$animate(!v)
    })
  }

  render() {
    return html`
      <main class="container">
        <wc-titlebar
          minimize
          @close=${this.#hide}
          @minimize=${this.#hide}
        ></wc-titlebar>
        <div class="content">
          <header class="name">APP STORE</header>
          <cite>v1.0.0</cite>
          <summary>
            Linux在线应用商店, 是一个应用分享平台, 每个人都可以提交应用信息,
            并分享使用体验。本平台并不支持在线安装到本地,
            仅提供应用的基本信息、使用体验, 以及官方的安装方法,
            不保证该软件能适配所有的发行版或某个发行版的所有版本,
            具体请参考官方说明, 或分享者自己的发行版信息。
          </summary>
          <span class="holder"></span>
          <footer>
            &copy; Powered By yutent, with
            <a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
              >wkitd</a
            >
          </footer>
        </div>
      </main>
    `
  }
}

About.reg('about')