/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/07/20 14:19:13
 */

import 'es.shim'
import { html, css, Component } from 'wkit'

class App extends Component {
  static props = {
    input: '',
    img: '',
    content: ''
  }

  static styles = css`
    .output {
      max-width: 100%;
      white-space: pre-wrap;
      word-break: break-all;
    }
  `

  render() {
    return html`
      <button @click=${this.test1}>Test 1</button>
      <button @click=${this.test2}>Test 2</button>

      <a target="_blank" href="about:blank">打开控制台</a>

      <div class="output">${this.content || 'loading...'}</div>

      <input value=${this.input} />

      <hr />
      <button @click=${this.writeImage}>写图片到剪切板</button>
      <button
        @click=${async function () {
          native.quit()
        }}
      >
        退出
      </button>
      <button @click=${this.createTray}>tray</button>
      <button @click=${this.register}>screen</button>
      <button
        @click=${function () {
          native.globalShortcut.unregisterAll(['<Ctrl>b', '<Ctrl>a'])
        }}
      >
        unregisterall
      </button>
      <button
        @click=${async function () {
          let data = await native.fs.read('/code/gtk/webkit/red.png', 'rb')
          console.log(data)
          // this.content = data
          this.img = URL.createObjectURL(
            new Blob([data], { type: 'image/png' })
          )
        }}
      >
        cat file
      </button>
      <button
        @click=${async function () {
          let data = await native.fs.list('/code/gtk/webkit/')
          console.log(data)
        }}
      >
        list dir
      </button>
      <button
        @click=${async function () {
          await native.fs.write(
            '/code/gtk/webkit/demo.txt',
            'hello world 222\n'
          )
        }}
      >
        echo >> file
      </button>
      <button
        @click=${async function () {
          await native.fs.copy(
            '/code/gtk/webkit/demo3.txt',
            '/code/gtk/webkit/demo2.txt'
          )
        }}
      >
        rename
      </button>
      <button
        @click=${async function () {
          native.notify({
            title: 'hello',
            icon: 'chrome',
            callback() {
              console.log('<><><><>, 通知被点击了')
            }
          })
        }}
      >
        通知
      </button>
      <img style="width:100px;border:1px solid #09f;" src=${this.img} />
      <textarea @paste=${this.pasteImg}></textarea>
      <br />
      <hr />
      <input
        type="file"
        @change=${async function (ev) {
          let file = ev.target.files[0]
          let u8 = new Uint8Array(await file.arrayBuffer())
          console.log(u8)
          // 分片写入
          for (let i = 0; i <= u8.length; i += 2048) {
            await native.fs.write(
              '/code/gtk/webkit/demo.png',
              Array.from(u8.slice(i, i + 2048)),
              'wb'
            )
          }
        }}
      />
    `
  }

  async test1() {
    let txt = await native.clipboard.readText()
    console.log('<><><>', txt)
    this.input = txt
  }

  async test2() {
    native.clipboard.writeText('这是一段写进剪切板的文本')
  }

  async writeImage() {
    let img = await native.image('/code/gtk/webkit/debian.png')
    native.clipboard.writeImage(img)
    // native.clipboard.writeImage('/code/gtk/webkit/red.png')
    try {
      this.img = URL.createObjectURL(await img.export())
    } catch (err) {
      alert(err)
    }
  }

  quit() {
    native.quit()
  }

  createTray() {
    native.tray()
  }

  async register() {
    // console.log(await native.globalShortcut.enabled)

    native.globalShortcut.register('<Ctrl>2', function () {
      alert('<Ctrl>2被绑定了')
    })
    // console.log(await native.screen.getAllDisplays())
    // console.log(await native.screen.getPrimaryDisplay())
  }

  async pasteImg(ev) {
    let items = ev.clipboardData.items
    // let items = ev.clipboardData.getData('image/png')
    // let items = await navigator.clipboard.read()
    // let img

    console.log(items)
    return
    // for (let item of items) {
    //   if (item.types.includes('image/png')) {
    //     img = await item.getType('image/png')
    //     console.log(img)
    //     this.img = URL.createObjectURL(img)
    //     return
    //   }
    // }

    // let img = await window?.native?.clipboard?.readImage()

    // console.log(img)

    // if (img) {
    //   this.img = URL.createObjectURL(await img.export())
    // }

    for (let it of items) {
      let file = it.getAsFile()
      if (file) {
        this.img = URL.createObjectURL(file)
        break
      }
    }
  }
}

App.reg('app')