<script setup>
import { useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

const props = defineProps({
    chat: Object,
});

const form = useForm({
    content: '',
});

function submit() {
    form.post(route('chats.messages.store', props.chat.id), {
        onSuccess: () => form.reset(),
    });
}
</script>

<template>
    <div class="mt-8">
        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">Chat</h4>
        <div class="mt-4 space-y-4">
            <div v-for="message in chat.messages" :key="message.id" class="p-4 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="flex justify-between">
                    <span class="font-semibold">{{ message.user.name }}</span>
                    <span class="text-xs text-gray-500">{{ new Date(message.created_at).toLocaleString() }}</span>
                </div>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ message.content }}</p>
            </div>
            <div v-if="chat.messages.length === 0" class="text-gray-500">
                No messages yet.
            </div>
        </div>
        <form @submit.prevent="submit" class="mt-6 space-y-6">
            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                <textarea v-model="form.content" id="content" rows="3" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"></textarea>
                <div v-if="form.errors.content" class="text-sm text-red-600">{{ form.errors.content }}</div>
            </div>
            <div class="flex items-center gap-4">
                <button type="submit" :disabled="form.processing" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                    Send
                </button>
            </div>
        </form>
    </div>
</template>
