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

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

class Titlebar extends Component {
  static styles = css`
    :host {
      display: flex;
      width: 100%;
      height: 48px;
    }
    .titlebar {
      display: flex;
      align-items: center;
      width: 100%;
      height: 48px;
      padding: 0 16px;
      border-radius: 8px 8px 0 0;
      background: var(--titlebar-background, transparent);
      color: var(--color-dark-1);
    }
    .btns {
      display: flex;
      align-items: center;
      gap: 6px;

      i {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--color-grey-1);
        cursor: default;

        &:nth-child(1) {
          background: var(--color-red-1);
          cursor: pointer;
        }
      }
    }

    :host([minimize]) .btns {
      i:nth-child(2) {
        background: var(--color-orange-1);
        cursor: pointer;
      }
    }

    :host([maximize]) .btns {
      i:nth-child(3) {
        background: var(--color-green-1);
        cursor: pointer;
      }
    }
  `

  #handleClick(ev) {
    if (ev.currentTarget === ev.target) {
      return
    }
    let { act } = ev.target.dataset

    this.$emit(act)
  }

  render() {
    return html`
      <div class="titlebar">
        <section class="btns" @click=${this.#handleClick}>
          <i data-act="close"></i><i data-act="minimize"></i
          ><i data-act="maximize"></i>
        </section>
      </div>
    `
  }
}

Titlebar.reg('titlebar')