<script setup lang="ts">
import { ref, createApp, onMounted } from 'vue'
import CButton from '../../CButton/CButton.vue'
import { useCToastPlugin, Position } from '../index'

const checkbox = ref(false)

const showToast = (position: Position) => {
  useCToastPlugin(
    '表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用',
    position,
    0,
    CButton
  )
  checkbox.value = true
  setTimeout(() => {
    checkbox.value = false
  }, 5000)
}

const test = () => {
  console.log('test')
}
</script>

<template>
  <div
    style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center"
  >
    ?
    <CButton @click="test()">aaaaaa</CButton>
    <CButton @click="test()">↑</CButton>
    <CButton @click="() => showToast('bottom')">↓</CButton>
    <CButton @click="() => showToast('right')">→</CButton>
    <CButton @click="() => showToast('left')">←</CButton>
  </div>
  <!-- <CToast v-if="checkbox" p_message="aaaa" :p_closable="true"></CToast> -->
</template>
<style>
/* :root {
  --q-primary: #5e421d;
} */
</style>
