<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Paperclip } from '@lucide/vue';
import { ref } from 'vue';
import { route } from 'ziggy-js';

const props = defineProps<{
    chatId: number;
}>();

const fileInput = ref<HTMLInputElement | null>(null);

const form = useForm({
    content: '',
    media: [] as File[],
});

function handleFileChange(event: Event) {
    const files = (event.target as HTMLInputElement).files;

    if (files) {
        for (let i = 0; i < files.length; i++) {
            form.media.push(files[i]);
        }
    }
}

function removeFile(index: number) {
    form.media.splice(index, 1);
}

function submit() {
    form.post(route('chats.messages.store', props.chatId), {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();

            if (fileInput.value) {
                fileInput.value.value = '';
            }
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit" class="c-chat__form">
        <div class="c-chat__form-group">
            <label for="content" class="c-chat__label">Message</label>
            <textarea
                v-model="form.content"
                id="content"
                rows="3"
                class="c-chat__textarea"
                placeholder="Type a message... (Press Enter to send, Shift+Enter for newline)"
                @keydown.enter.exact.prevent="submit"
            ></textarea>
            <div v-if="form.errors.content" class="c-chat__error">
                {{ form.errors.content }}
            </div>

            <!-- Attachment Button & Hidden Input -->
            <div class="c-chat__attachment-container">
                <button
                    type="button"
                    @click="fileInput?.click()"
                    class="c-chat__attach-btn"
                >
                    <Paperclip class="c-chat__attach-icon" />
                    Attach Photos/Videos
                </button>
                <input
                    ref="fileInput"
                    type="file"
                    multiple
                    accept="image/*,video/*"
                    class="hidden"
                    @change="handleFileChange"
                />
            </div>

            <!-- Previews List -->
            <div v-if="form.media.length > 0" class="c-chat__preview-list">
                <div
                    v-for="(file, index) in form.media"
                    :key="index"
                    class="c-chat__preview-item"
                >
                    <span class="c-chat__preview-name">{{
                        file.name
                    }}</span>
                    <button
                        type="button"
                        @click="removeFile(index)"
                        class="c-chat__preview-remove"
                    >
                        ✕
                    </button>
                </div>
            </div>
        </div>
        <div class="c-chat__submit-box">
            <button
                type="submit"
                :disabled="form.processing"
                class="c-chat__button"
            >
                Send
            </button>
        </div>
    </form>
</template>
