import './style.css'
import Emoji from './emoji.js'

document.querySelector('#app').innerHTML = `
  <div>
    <textarea id="textaret">🥳hello world! </textarea>
    <div class="card">
      <button id="counter" type="button">click here</button>
    </div>
    <p class="read-the-docs">
      Click the button to test inserting emoji
    </p>
    <div>
      <a href="https://git.satori.love/satori/emoji" target="_blank">gitea</a>
      <a href="https://github.com/InvisibleFuture/emoji" target="_blank">github</a>
      <a href="https://www.npmjs.com/package/satori-emoji" target="_blank">npm</a>
      <a href="https://satori.love" target="_blank">satori</a>
    <div>
  </div>
`

const emoji = new Emoji({
  input: document.querySelector('#textaret'),
  onShow: () => {
    console.log('组件被打开了')
  },
  onHide: () => {
    console.log('组件被关闭了')
  },
  onSubmit: (data) => {
    console.log('提交了', data)
  },
})

document.querySelector('#counter').addEventListener('click', () => {
  emoji.show()
})