<script setup>
import { computed, ref } from "vue"
import {
    NButton,
    NCard,
    NSpace,
    NTag
} from "naive-ui"
import { useFloating } from "./composables/useFloating"

const props = defineProps({
    step: {
        type: Object,
        required: true
    },
    visible: {
        type: Boolean,
        default: false
    },
    isFirst: Boolean,
    isLast: Boolean,
    target: {
        type: [HTMLElement, String, Object],
        default: null
    },
})

const emit = defineEmits([
    "next",
    "previous",
    "finish",
    "close"
])

const floating = ref(null)

const {
    x,
    y,
    strategy
} = useFloating(
    () => props.target,
    floating
)

const style = computed(() => ({
    position: strategy.value,
    left: `${x.value}px`,
    top: `${y.value}px`,
    zIndex: 9999
}))

</script>

<template>
        <Transition name="tour-tooltip">
            <div
                ref="floating"
                v-if="visible && step"
                class="tour-tooltip"
                :style="style"
            >
                <NCard
                    style="width:320px"
                    size="small"
                >
                    <template #header>
                        <div class="flex justify-between items-center">
                            <span class="font-semibold">
                                {{ step.title }}
                            </span>

                            <NTag
                                v-if="step.tag"
                                size="small"
                            >
                                {{ step.tag }}
                            </NTag>
                        </div>
                    </template>

                    <div class="text-sm whitespace-pre-line">
                        {{ step.description }}
                    </div>

                    <slot />

                    <template #footer>
                        <NSpace justify="space-between">
                            <div>
                                <NButton
                                    quaternary
                                    size="small"
                                    @click="emit('close')"
                                >
                                    Пропустить
                                </NButton>
                            </div>

                            <NSpace>
                                <NButton
                                    v-if="!isFirst"
                                    size="small"
                                    @click="emit('previous')"
                                >
                                    Назад
                                </NButton>

                                <NButton
                                    v-if="!isLast"
                                    type="primary"
                                    size="small"
                                    :disabled="step.manual"
                                    @click="emit('next')"
                                >
                                    Далее
                                </NButton>

                                <NButton
                                    v-else
                                    type="primary"
                                    size="small"
                                    @click="emit('finish')"
                                >
                                    Завершить
                                </NButton>
                            </NSpace>
                        </NSpace>
                    </template>
                </NCard>
            </div>
        </Transition>
</template>

<style scoped>

.tour-tooltip {
    transition:
        left .18s,
        top .18s;
}

.tour-tooltip-enter-active,
.tour-tooltip-leave-active {
    transition: .18s;
}

.tour-tooltip-enter-from,
.tour-tooltip-leave-to {
    opacity:0;
    transform:translateY(6px);
}

</style>