<script setup lang="ts">
import { computed, ref } from 'vue'
import { motion, AnimatePresence } from 'motion-v'
import { Toast } from 'reka-ui/namespaced'

const date = ref<string | null>(null)
function randomDate() {
  const now = new Date()
  const inOneWeek = now.setDate(
    now.getDate() + Math.round(Math.random() * 31)
  )
  return new Date(inOneWeek)
}

function prettyDate(date) {
  return new Intl.DateTimeFormat("en-US", {
    dateStyle: "full",
    timeStyle: "short",
  }).format(date)
}

function addToCalendar() {
  date.value = prettyDate(randomDate())
}

function closeToast() {
  date.value = null
}

function handleDragUpdate(latest) {
  if (latest.x > 100) {
    date.value = null
  }
}
</script>

<template>
  <Toast.Provider>
    <motion.button class="button primary-action large" :while-press="{ scale: 0.9 }" @click="addToCalendar">
      Add to calendar
    </motion.button>

    <Toast.Root :duration="3000"  :force-mount="true" :as-child="true">
      <AnimatePresence mode="wait">
        <motion.div 
          v-if="date" 
          :key="date"
          class="toast-root" 
          :initial="{ opacity: 0, x: 100 }" 
          :animate="{ opacity: 1, x: 0 }"
          :exit="{ opacity: 0, scale: 0.9 }" 
          :drag="'x'" 
          :drag-elastic="0.1" 
          :drag-constraints="{ left: 0 }"
          @update="handleDragUpdate"
          >
          <Toast.Title class="toast-title">
            Scheduled: Catch up
          </Toast.Title>
          <Toast.Description :as-child="true">
            <time class="toast-description" :dateTime="date">
              {{ date }}
            </time>
          </Toast.Description>
          <Toast.Action :as-child="true" alt-text="Goto schedule to undo">
            <button class="button small toast-action" @click="closeToast">Undo</button>
          </Toast.Action>
        </motion.div>
      </AnimatePresence>
    </Toast.Root>
    <Toast.Viewport class="toast-viewport" />
  </Toast.Provider>
</template>

<style>
button {
  cursor: pointer;
}

.toast-viewport {
  --viewport-padding: 25px;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--viewport-padding);
  gap: 10px;
  width: 390px;
  max-width: 100vw;
  margin: 0;
  list-style: none;
  z-index: 2147483647;
  outline: none;
}

.toast-root {
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  padding: 15px;
  display: grid;
  grid-template-areas: "title action" "description action";
  grid-template-columns: auto max-content;
  column-gap: 15px;
  align-items: center;
}

.toast-title {
  grid-area: title;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text);
  font-size: 15px;
}

.toast-description {
  grid-area: description;
  margin: 0;
  color: var(--feint-text);
  font-size: 13px;
  line-height: 1.3;
}

.toast-action {
  grid-area: action;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 500;
  user-select: none;
}

.button.small {
  font-size: 14px;
  padding: 0 10px;
  line-height: 25px;
  height: 25px;
  background: #0d63f8;
}

.button.large {
  font-size: 16px;
  padding: 0 10px;
  line-height: 35px;
  height: 35px;
}
</style>