<template>
    <div class="chatPopup" :class="[`chatPopup--${location}`]">

        <!-- Chat Popup Window -->
        <transition name="fade">
            <div v-if="isOpen" class="chatPopup--open">
                <AgentChat :toggleChat="toggleChat"></AgentChat>
            </div>
        </transition>

        <!-- The Toggle Button -->
        <button
            type="button"
            class="chatPopup__toggle"
            :class="{ 'chatPopup__toggle--active': isOpen }"
            @click="toggleChat"
            v-if="!hidden"
            aria-label="Open Chat"
        >
            <span class="chatPopup__text" v-if="!isOpen">AI</span>
            <span class="chatPopup__text" v-else>Close</span>

            <!-- Icon SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="chatPopup__icon">
                <path opacity=".4" d="M48 240c0 42.8 15.1 82.4 41.2 114.7 12.2 15.1 14.1 36.1 4.8 53.2l-18 33.1 58.5-25.1c11.8-5.1 25.2-5.2 37.1-.3 25.7 10.5 54.2 16.4 84.3 16.4 117.8 0 208-88.8 208-192S373.8 48 256 48 48 136.8 48 240z"/>
                <path d="M51.9 384.9C19.3 344.6 0 294.4 0 240 0 107.5 114.6 0 256 0S512 107.5 512 240 397.4 480 256 480c-36.5 0-71.2-7.2-102.6-20L37 509.9c-3.7 1.6-7.5 2.1-11.5 2.1-14.1 0-25.5-11.4-25.5-25.5 0-4.3 1.1-8.5 3.1-12.2l48.8-89.4zm37.3-30.2c12.2 15.1 14.1 36.1 4.8 53.2l-18 33.1 58.5-25.1c11.8-5.1 25.2-5.2 37.1-.3 25.7 10.5 54.2 16.4 84.3 16.4 117.8 0 208-88.8 208-192S373.8 48 256 48 48 136.8 48 240c0 42.8 15.1 82.4 41.2 114.7z"/>
            </svg>
        </button>
    </div>
</template>

<script>
import AgentChat from "./agentChat.vue";

export default {
    name: 'AgentChatPopup',
    components: { AgentChat },
    data() {
        return {
            isOpen: false,
            hidden: false,
            location: "bottom-right"
        }
    },
    methods: {
        toggleChat() {
            this.isOpen = !this.isOpen;
        },
        async fetchAccess() {
            try {
                const response = await fetch('/agent/access', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                this.hidden = !data.access;
            } catch (error) {
                console.error('Error checking access:', error);
                this.hidden = true;
            }
        },
        async fetchPosition() {
            try {
                const response = await fetch('/agent/settings/position', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                if (data.position) {
                    this.location = data.position;
                }
            } catch (error) {
                console.error('Error fetching position:', error);
            }
        }
    },
    mounted() {
        this.fetchAccess();
        this.fetchPosition();
    },
}
</script>

<style scoped lang="less">
@import "../styles/popup.less";
</style>
