<template>
    <div class="chatFooter">
        <form @submit.prevent="handleSubmit" class="chatFooter__form">
            <div class="inputGroup">

                <div class="inputGroup__textInputWrapper">
                    <textarea
                        type="text"
                        v-model="text"
                        placeholder="Ask a question..."
                        class="inputGroup__textInput"
                        @keydown.enter.exact.prevent="handleSubmit"
                    ></textarea>
                    <div class="inputGroup__accessoryIcons">
                        <button type="button" class="inputGroup__iconBtn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path opacity=".4" d="M144 96l0 128c0 26.5 21.5 48 48 48s48-21.5 48-48l0-128c0-26.5-21.5-48-48-48s-48 21.5-48 48z"/><path d="M192 48c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48s-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48zM96 96l0 128c0 53 43 96 96 96s96-43 96-96l0-128c0-53-43-96-96-96S96 43 96 96zM48 184c0-13.3-10.7-24-24-24S0 170.7 0 184l0 40c0 97.9 73.3 178.7 168 190.5l0 49.5-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-49.5c94.7-11.8 168-92.6 168-190.5l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 79.5-64.5 144-144 144S48 303.5 48 224l0-40z"/></svg>
                        </button>
                    </div>
                </div>

                <button type="submit" class="inputGroup__sendBtn" :class="{'inputGroup__sendBtn--active': isSendButtonActive}">
                    ↑
                </button>
            </div>
        </form>
        <span class="chatFooter__hint">Press Enter to send, Shift + Enter for a new line</span>
        <Privacy/>
    </div>
</template>

<script>
import Privacy from "../elements/privacy.vue";

export default {
    name:'ChatFooter',
    components: {Privacy},
    // 1. Reactive state is defined in the data() function
    data() {
        return {
            text: '',
        };
    },

    // 2. Logic that depends on reactive data is defined in computed properties
    computed: {
        isSendButtonActive() {
            // Returns true if the text is not empty or only whitespace
            return this.text.trim().length > 0;
        },
    },

    // 3. Functions that handle events or business logic are defined in methods
    methods: {
        handleSubmit() {
            // We check the reactive property 'text'
            if (this.isSendButtonActive) {
                // Replace this console log with your actual logic (e.g., emitting an event)
                this.$emit('send-message', this.text);

                // Clear input after sending
                this.text = '';
            }
        },
    },
};
</script>

<style lang="less">
@import "../../../styles/structure/footer.less";
</style>
