<script setup lang="ts">
// types

type Props = {
    showChatButton: boolean;
};

// props

defineProps<Props>();

// state

const isOpen = ref(false);
const isMobile = useMediaQuery("(max-width: 480px)");
const isWindowScrollLocked = useScrollLock(window);

// methods

const closeChat = () => (isOpen.value = false);

// provide-inject

provide("isOpen", {
    isOpen,
    closeChat,
});

// watches

watch([isMobile, isOpen], ([isMobile, isOpen]) => {
    isWindowScrollLocked.value = isMobile && isOpen;
});
</script>

<template>
    <Transition
        name="fade"
        :duration="150"
    >
        <button
            v-if="showChatButton && !isOpen"
            @click="isOpen = !isOpen"
            class="cursor-pointer z-50 fixed shadow-xl shadow-black/30 right-8 bottom-8 bg-blue-500 size-[70px] flex justify-center items-center rounded-full"
        >
            <Icon
                name="ci:streamline-artificial-intelligence-spark"
                class="**:stroke-white size-[26px]"
            />
        </button>
    </Transition>

    <ChatBoxContainer :isOpen="isOpen" />
</template>
