<template>
    <form @submit.prevent="sendMessage" class="chatForm">
        <div class="chatForm__group">
            <label for="message" class="chatForm__label">Your Message</label>
            <textarea
                id="message"
                v-model="message"
                rows="4"
                placeholder="Type your message or use the record buttons below..."
                required
                class="chatForm__input"
                :disabled="isLoading"
            ></textarea>
        </div>
        <ChatActions
            :is-recording="isRecording"
            :is-loading="isLoading"
            :audio-url="audioUrl"
            :message="message"
            @startRecording="startRecording"
            @stopRecording="stopRecording"
        />
    </form>
</template>

<script>
import ChatActions from "./actions.vue";

export default {
    name: 'chatForm',
    methods: {
        sendMessage() {
            this.$emit('send-message' , this.message);
        },
        startRecording() {
            this.$emit('start-recording');
        },
        stopRecording() {
            this.$emit('stop-recording');
        }
    },
    props: {
        isRecording: {
            type: Boolean,
            default: false
        },
        isLoading: {
            type: Boolean,
            default: false
        },
        audioUrl: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            message: '',
        };
    },
    components: {ChatActions}

}
</script>

<style lang="less" >
.chatForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &__group {
        display: flex;
        flex-direction: column;
    }

    &__label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-gray-800);
        margin-bottom: 0.5rem;
    }

    &__input {
        width: 100%;
        box-sizing: border-box; /* Important for padding */
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        outline: none;
        transition: all 0.2s;
        resize: none;
        color: var(--text-gray-800);
        font-family: inherit;

        &::placeholder {
            color: var(--text-gray-400);
        }

        &:focus {
            border-color: var(--color-blue-600);
            box-shadow: 0 0 0 4px #dbeafe;
        }
    }

}
</style>
