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

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

class Topbar extends Component {
  static styles = [
    css`
      :host {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100vw;
        height: 28px;
        font-size: 14px;
        color: var(--color-dark-1);
        -webkit-user-select: none;
        user-select: none;
      }

      .container {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
      }
      .left,
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 8px;
      }
      .center {
        flex-shrink: 0;
      }
      .right {
        justify-content: end;

        --wc-icon-size: 16px;
        color: var(--color-red-1);
      }

      wc-icon {
        cursor: pointer;
      }
    `,
    css`
      .logo {
        width: 22px;
        height: 22px;
      }
    `
  ]

  #date = new Date().format('m月d日 H:i')

  mounted() {}

  render() {
    return html`
      <div class="container">
        <div class="left">
          <img src="/assets/img/deb.svg" class="logo" />
        </div>
        <div class="center">${this.#date}</div>
        <div class="right">
          <wc-icon
            name="switch"
            @click=${_ => (this.$store.powerAppShow = true)}
          ></wc-icon>
        </div>
      </div>
    `
  }
}

Topbar.reg('topbar')