<template>
    <button
        v-if="count > 0"
        ref="buttonRef"
        v-ripple="canToggle"
        class="hkzvhatu _button"
        :class="{
            reacted: magReactionSelf(note) === magReactionToLegacy(reaction),
            canToggle,
            newlyAdded: !isInitial,
        }"
        @click="toggleReaction()"
    >
        <MagEmoji
            class="icon"
            :emoji="reaction"
            :is-reaction="true"
            :normal="true"
        />
        <span class="count">{{ count }}</span>
    </button>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import * as misskey from "calckey-js";
import XDetails from "@/components/MkReactionsViewer.details.vue";
import * as os from "@/os";
import { useTooltip } from "@/scripts/use-tooltip";
import { $i } from "@/account";
import { packed, types } from "magnetar-common";
import { magReactionSelf, magReactionToLegacy } from "@/scripts-mag/mag-util";

const props = defineProps<{
    reaction: types.Reaction;
    count: number;
    isInitial: boolean;
    note: packed.PackNoteMaybeFull | misskey.entities.Note;
}>();

const buttonRef = ref<HTMLElement>();

const canToggle = computed(
    () => !magReactionToLegacy(props.reaction).match(/@\w/) && $i,
);

const toggleReaction = () => {
    if (!canToggle.value) return;

    const oldReaction = magReactionSelf(props.note);
    const newReaction = magReactionToLegacy(props.reaction);
    if (oldReaction) {
        os.api("notes/reactions/delete", {
            noteId: props.note.id,
        }).then(() => {
            if (oldReaction !== newReaction) {
                os.api("notes/reactions/create", {
                    noteId: props.note.id,
                    reaction: magReactionToLegacy(props.reaction),
                });
            }
        });
    } else {
        os.api("notes/reactions/create", {
            noteId: props.note.id,
            reaction: magReactionToLegacy(props.reaction),
        });
    }
};

useTooltip(
    buttonRef,
    async (showing) => {
        const reactions = await os.apiGet("notes/reactions", {
            noteId: props.note.id,
            type: magReactionToLegacy(props.reaction),
            limit: 11,
            _cacheKey_: props.count,
        });

        const users = reactions.map((x) => x.user);

        os.popup(
            XDetails,
            {
                showing,
                reaction: props.reaction,
                users,
                count: props.count,
                targetElement: buttonRef.value,
            },
            {},
            "closed",
        );
    },
    100,
);
</script>

<style lang="scss" scoped>
.hkzvhatu {
    display: inline-block;
    height: 32px;
    margin: 2px;
    padding: 0 6px;
    border-radius: 4px;
    pointer-events: all;
    &.newlyAdded {
        animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
        :deep(.mk-emoji) {
            animation: scaleIn 0.4s cubic-bezier(0.7, 0, 0, 1.5);
        }
    }
    :deep(.mk-emoji) {
        transition: transform 0.4s cubic-bezier(0, 0, 0, 6);
    }
    &.reacted :deep(.mk-emoji) {
        transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
    }
    &:active {
        :deep(.mk-emoji) {
            transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
            transform: scale(0.85);
        }
    }
    &.canToggle {
        background: rgba(0, 0, 0, 0.05);

        &:hover {
            background: rgba(0, 0, 0, 0.1);
        }
    }

    &:not(.canToggle) {
        cursor: default;
    }

    &.reacted {
        background: var(--accent);

        &:hover {
            background: var(--accent);
        }

        > .count {
            color: var(--fgOnAccent);
            font-weight: 600;
        }

        > .icon {
            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
        }
    }

    > .count {
        font-size: 0.9em;
        line-height: 32px;
        margin: 0 0 0 4px;
    }
}
</style>
