<script setup lang="ts">
import { PropType, computed, createApp, onMounted, ref } from 'vue'
import { defineEmits } from 'vue'
import { MDIcon } from '../..'
import { MDIcon as MDIconType } from '../MDIcon/MDIcon.types'
import { Position } from './index'
const props = defineProps({
  /**
   * toast表示するメッセージ
   * @example p_message: 'テストを開始しました'
   */
  p_message: { type: String, default: '', required: true },
  /**
   * toastのicon
   * @example 'cached'
   */
  p_icon: { type: String as PropType<MDIconType> },
  /**
   * 表示される期間をミリ秒単位で指定
   * @example p_duration: '5000'
   */
  p_duration: { type: Number, default: 0 },

  /**
   * Toastをクリックして閉じる
   * @example p_closable: true
   */
  p_clickDelete: { type: Boolean, default: true },
  /**
   * Toastが閉じられたときに実行される特定の関数を定義
   * @example p_onClose: handleClose
   */
  p_onClose: { type: Function, default: null },
  /**
   * Toast表示位置設定
   */
  p_position: { type: String as PropType<Position>, default: null },
  /**
   * Toastアニメーションの設定
   */
  p_animationType: { type: String as PropType<'slide' | 'fade'>, default: 'slide' },
})

// 表示切り替え用
const isVisible = ref(false)

const emit = defineEmits(['update:modelValue', 'click'])

// 表示時間の設定
onMounted(() => {
  isVisible.value = true

  if (props.p_duration > 0) {
    setTimeout(() => {
      isVisible.value = false
    }, props.p_duration)
  }
})

const hideToast = () => {
  isVisible.value = false

  if (props.p_onClose) {
    props.p_onClose()
  }
}
</script>

<template>
  <transition :name="props.p_animationType">
    <div class="toast" v-if="isVisible" @click="p_clickDelete ? hideToast() : ''">
      <div class="_toast_content">
        <MDIcon v-if="p_icon" :name="p_icon"></MDIcon>
        <div>{{ props.p_message }}</div>
      </div>
    </div>
  </transition>
</template>
<style></style>

<style lang="sass">
.toast
  padding: 10px
  font-size: 16px
  color: #333
  background-color: #f0f0f0
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
  border-radius: 4px
  overflow: hidden
  margin: 10px
  user-select: none

  max-width: 300px
._toast_content
  display: flex
  align-items: center
  gap: 10px

// --------------------------------------------------------------------------
//fadeAnimation
// --------------------------------------------------------------------------
.fade-enter-active,.fade-leave-active
  transition: opacity 1s ease

.fade-enter-active
  transition: opacity 10s ease

.fade-enter-from,.fade-leave-to
  opacity: 0
  transform: scaleY(0)
.fade-enter-to,.fade-leave-from
  opacity: 1
  transform: scaleY(1)

// --------------------------------------------------------------------------
//slideAnimation
// --------------------------------------------------------------------------
.slide-enter-active,.slide-leave-active
  transition: transform 1s ease, opacity 1s ease

.slide-enter-from,.slide-leave-to
  opacity: 0
  transform: scaleY(0)
.slide-enter-to,.slide-leave-from
  opacity: 1
  transform: scaleY(1)
// .slide-enter-from,.slide-leave-to
//   transform: translateY(-100%)
//   opacity: 0
</style>
