<script setup lang="tsx">
/** @jsxImportSource vue */
import { AnimateNumber, type AnimateNumberProps } from "motion-plus-vue"
import { mix, motion } from "motion-v"
import { ref, onMounted, onUnmounted, computed, useSlots } from "vue"

const format: AnimateNumberProps["format"] = {
    notation: "compact",
    compactDisplay: "short",
    roundingMode: "trunc",
}

const stats = ref({
    views: 1200,
    retweets: 15,
    likes: 97,
    bookmarks: 10,
})

const isRetweetSelected = ref(false)
const isLikeSelected = ref(false)
const isBookmarkSelected = ref(false)

const retweet = computed(() => isRetweetSelected.value ? 1 : 0)
const like = computed(() => isLikeSelected.value ? 1 : 0)
const bookmark = computed(() => isBookmarkSelected.value ? 1 : 0)

let timer: ReturnType<typeof setTimeout>

onMounted(() => {
    timer = setInterval(() => {
        stats.value = {
            views: increment(stats.value.views, 100, 1000),
            retweets: increment(stats.value.retweets, 1, 5),
            likes: increment(stats.value.likes, 50, 100),
            bookmarks: increment(stats.value.bookmarks, 1, 10),
        }
    }, 5000)
})

onUnmounted(() => {
    clearInterval(timer)
})

/**
 * ==============   Utils   ================
 */

const increment = (value: number, min: number, max: number) => {
    return Math.round(value + mix(min, max, Math.random()))
}

/**
 * ==============   Icons   ================
 */

function Icon({ isSelected, height = 24, hue }) {
    const slots = useSlots()
    return (
        <motion.svg
            xmlns="http://www.w3.org/2000/svg"
            width={24}
            height={24}
            fill="none"
            stroke="currentColor"
            stroke-width={2}
            stroke-linecap="round"
            stroke-linejoin="round"
            class={isSelected ? "selected" : ""}
            viewBox={`0 0 24 ${height}`}
            variants={{
                default: { scale: 1 },
                pressed: { scale: 0.9 },
            }}
            style={{ height, color: hue ? `var(--hue-${hue})` : `#f5f5f5`,outline:'none' }}
        >
            {slots.default?.()}
        </motion.svg>
    )
}

function RetweetIcon({ isSelected }) {
    return (
        <Icon isSelected={isSelected} height={20} hue={6}>
            <path d="m2 9 3-3 3 3" />
            <path d="M13 18H7a2 2 0 0 1-2-2V6" />
            <path d="m22 15-3 3-3-3" />
            <path d="M11 6h6a2 2 0 0 1 2 2v10" />
        </Icon>
    )
}

function LikeIcon({ isSelected }) {
    return (
        <Icon isSelected={isSelected} height={22} hue={1}>
            <motion.path
                variants={{
                    default: { fill: "#ff008800" },
                    selected: { fill: "#ff0088" },
                }}
                d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
            />
        </Icon>
    )
}

function ViewsIcon({ isSelected }) {
    return (
        <Icon isSelected={isSelected}>
            <line x1="18" x2="18" y1="20" y2="10" />
            <line x1="12" x2="12" y1="20" y2="4" />
            <line x1="6" x2="6" y1="20" y2="14" />
        </Icon>
    )
}

function BookmarkIcon({ isSelected }) {
    return (
        <Icon isSelected={isSelected} height={22} hue={4}>
            <motion.path
                variants={{
                    default: { fill: "#0d63f800" },
                    selected: { fill: "#0d63f8" },
                }}
                d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
            />
        </Icon>
    )
}
</script>

<template>
    <div class="engagement-stats">
        <div class="item">
            <div class="icon">
                <ViewsIcon :isSelected="stats.views > 0" />
            </div>
            <div class="text">
                <AnimateNumber :format="format" :value="stats.views" />
            </div>
        </div>
        <motion.button
            class="item"
            initial="default"
            press="pressed"
            :animate="isRetweetSelected ? 'selected' : 'default'"
            @click="isRetweetSelected = !isRetweetSelected"
        >
            <div class="icon">
                <RetweetIcon :isSelected="isRetweetSelected" />
            </div>
            <div class="text">
                <AnimateNumber :format="format" :value="stats.retweets + retweet" />
            </div>
        </motion.button>
        <motion.button
            class="item"
            initial="default"
            press="pressed"
            :animate="isLikeSelected ? 'selected' : 'default'"
            @click="isLikeSelected = !isLikeSelected"
        >
            <div class="icon">
                <LikeIcon :isSelected="isLikeSelected" />
            </div>
            <div class="text">
                <AnimateNumber :format="format" :value="stats.likes + like" />
            </div>
        </motion.button>
        <motion.button
            class="item"
            initial="default"
            press="pressed"
            :animate="isBookmarkSelected ? 'selected' : 'default'"
            @click="isBookmarkSelected = !isBookmarkSelected"
        >
            <div class="icon">
                <BookmarkIcon :isSelected="isBookmarkSelected" />
            </div>
            <div class="text">
                <AnimateNumber :format="format" :value="stats.bookmarks + bookmark" />
            </div>
        </motion.button>
    </div>
</template>

<style>
.engagement-stats {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 400px;
}

.item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.text {
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
}
</style>