<script lang="ts" setup>
import { ref } from 'vue'
import { MDIcon } from '../..'

import { Position, Toast } from './index'

const topToasts = ref<Toast[]>([])
const bottomToasts = ref<Toast[]>([])
const clickDelete = ref<boolean>(true)

/**
 * 指定されたIDに対応するトーストを配列から削除します。
 *
 * @param {number} id - 削除したいトーストの一意のID
 * @returns {void}
 */
function removeToast(id) {
  // topToasts配列内で、idが指定されたトーストのインデックスを探す
  const indexTop = topToasts.value.findIndex((toast) => toast.id === id)
  if (indexTop !== -1) {
    // トーストが見つかった場合は、topToasts配列から削除する
    topToasts.value.splice(indexTop, 1)
  }

  // bottomToasts配列内で、idが指定されたトーストのインデックスを探す
  const indexBottom = bottomToasts.value.findIndex((toast) => toast.id === id)
  if (indexBottom !== -1) {
    // トーストが見つかった場合は、bottomToasts配列から削除する
    bottomToasts.value.splice(indexBottom, 1)
  }
}

/**
 * トーストを追加関数。
 *
 * @param {string} message - トーストに表示するメッセージの内容
 * @param {number} [duration=40000] - トーストが表示される期間（ミリ秒単位）
 * @param {Position} [position='top'] - トーストの表示位置（'top'または'bottom'）
 * @param {number} [width=100] - トーストの幅
 * @param {string} [icon='info'] - トーストに表示するアイコン
 * @param {boolean} [isClickDelete=true] - トーストをクリックしたときに削除するかどうかを指定します
 * @returns {void}
 */
function addToast(
  message,
  duration = 40000,
  position = 'top',
  width = 100,
  icon = 'info',
  isClickDelete = true
) {
  clickDelete.value = isClickDelete
  const id = Date.now()
  console.log(message)

  if (position === 'top') {
    topToasts.value.push({
      message: message,
      duration,
      id,
      width,
      position,
      icon: 'info',
    })
  }

  if (position === 'bottom') {
    console.log('bottom')
    bottomToasts.value.push({
      message: message,
      duration,
      id,
      width,
      position,
      icon: 'info',
    })
  }

  setTimeout(() => {
    removeToast(id)
  }, duration)
}
// windowに追加
window.addToast = addToast

function setPositionStatic(toastsContent: Toast[], targetId: string) {
  if (toastsContent.length === 0) {
    ;(document.querySelector(targetId) as HTMLElement).style.position = 'static'
  }
}

function setPositionAbsolute(toastsContent: Toast[], targetId: string) {
  console.log('setPositionAbsolute')
  if (toastsContent.length !== 0) {
    ;(document.querySelector(targetId) as HTMLElement).style.position = 'absolute'
  }
}
</script>

<!-- 以下の部分は変更が必要ないので省略します。 -->

<template>
  <div id="top-toaster" :class="`_top_toasts_wrapper`">
    <TransitionGroup
      name="list"
      @leave="setPositionStatic(topToasts, '#top-toaster')"
      @enter="setPositionAbsolute(topToasts, '#top-toaster')"
    >
      <div
        v-for="toast in topToasts"
        :key="toast.id"
        class="_toast"
        @click="clickDelete ? removeToast(toast.id) : () => {}"
      >
        <div class="_toast_content">
          <MDIcon v-if="toast.icon" :name="toast.icon"></MDIcon>
          <div>{{ toast.message }}</div>
        </div>
      </div>
    </TransitionGroup>
  </div>
  <div id="bottom-toaster" :class="`_bottom_toasts_wrapper`">
    <TransitionGroup
      name="list"
      @leave="setPositionStatic(bottomToasts, '#bottom-toaster')"
      @enter="setPositionAbsolute(bottomToasts, '#bottom-toaster')"
    >
      <div
        v-for="toast in bottomToasts"
        :key="toast.id"
        class="_toast"
        @click="() => removeToast(toast.id)"
      >
        <div class="_toast_content">
          <MDIcon v-if="toast.icon" :name="toast.icon"></MDIcon>
          <div v-html="toast.message"></div>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<style lang="sass" scoped>
/* 通常のトーストのスタイル */
._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: 100vw

/* トーストの内容部分のスタイル */
._toast_content
  display: flex
  align-items: center
  gap: 10px
  word-wrap: break-word
  white-space: pre-wrap
  max-width: 50vw

._top_toasts_wrapper
  position: absolute
  height: fit-content
  width: 100vw
  top: 0
  left: 0
  width: auto

  // .list-leave-active

._bottom_toasts_wrapper
  position: absolute
  height: fit-content
  bottom: 0
  left: 0

/* トーストが表示・非表示する時のアニメーション */
.list-move,
.list-enter-active,
.list-leave-active
  transition: all 0.5s ease

._top_toasts_wrapper > .list-enter-from
  opacity: 0
  transform: translateX(-100%)
._bottom_toasts_wrapper > .list-enter-from
  opacity: 0
  transform: translateX(-100%)

/* list-leave-toのスタイルを調整 */
._top_toasts_wrapper > .list-leave-to
  opacity: 0
  transform: translateX(-100%)
  transition: all 1s ease

._bottom_toasts_wrapper > .list-leave-to
  opacity: 0
  transform: translateX(-1000%)
  transition: all 1s ease

/* leave する項目をレイアウトフローから外すことで
   アニメーションが正しく計算されるようになる */
.list-leave-active
  position: absolute

.list-container
  position: relative
</style>
