<template>
    <TransitionRoot as="template" :show="open">
        <Dialog as="div" class="relative z-10" @close="close">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur-sm" />

            <div class="fixed inset-0 overflow-hidden">
                <div class="absolute inset-0 overflow-hidden ">
                    <div class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none lg:pl-10">
                        <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700"
                            enter-from="translate-x-full" enter-to="translate-x-0"
                            leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0"
                            leave-to="translate-x-full">
                            <DialogPanel class="w-screen max-w-sm pointer-events-auto">
                                <div class="flex flex-col h-full bg-white shadow-xl">
                                    <div class="flex flex-col flex-1 min-h-0 ">
                                        <div class="flex items-center w-full h-16 px-4 bg-white sm:px-6 drop-shadow-sm">
                                            <div class="flex items-start justify-between w-full">
                                                <DialogTitle v-if="peopleIndexSelected !== null"
                                                    class="text-sm font-medium text-gray-900">
                                                    <PictureInitial class-name="mr-2" background-class="bg-primary-400"
                                                        font-class="font-medium text-white text-md"
                                                        :name="people[peopleIndexSelected].name" />
                                                    {{ people[peopleIndexSelected].name }}
                                                </DialogTitle>
                                                <DialogTitle v-else class="font-medium text-gray-900 text-md">
                                                    Team
                                                </DialogTitle>
                                                <div class="flex items-center ml-3 h-7 ">
                                                    <button type="button"
                                                        class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:ring-0 "
                                                        @click="peopleIndexSelected === null ? close() : selectPeople(null)">
                                                        <span class="sr-only">Close panel</span>
                                                        <XMarkIcon class="w-6 h-6" aria-hidden="true" />
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-1 overflow-y-auto bg-layout">
                                            <div v-if="peopleIndexSelected !== null"
                                                class="flex flex-col items-center justify-center h-full px-4 sm:px-6"
                                                aria-hidden="true">
                                                <ChatBubbleLeftRightIcon class="w-12 h-12 mx-auto text-gray-400"
                                                    aria-hidden="true" />
                                                <h3
                                                    class="mt-2 font-bold text-center text-gray-900 whitespace-pre-wrap text-md">
                                                    Tidak ada percakapan
                                                </h3>
                                                <p class="mt-1 text-sm text-center text-gray-600 whitespace-pre-wrap ">
                                                    Mulai percakapan dengan <b>{{ people[peopleIndexSelected].name }}</b>
                                                    untuk melihat percakapan disini.
                                                </p>
                                            </div>
                                            <div v-else class="h-full bg-white" aria-hidden="true">
                                                <ul role="list" class="flex-1 overflow-y-auto divide-y divide-gray-50">
                                                    <li v-for="(person, index) in people" :key="person.id"
                                                        class="cursor-pointer" @click="selectPeople(index)">
                                                        <div class="relative flex items-center px-5 py-3 group">
                                                            <div class="flex-1 block p-1 -m-1">
                                                                <div class="absolute inset-0 group-hover:bg-primary-100"
                                                                    aria-hidden="true" />
                                                                <div class="relative flex items-center flex-1 min-w-0">
                                                                    <span class="relative flex-shrink-0 inline-block">
                                                                        <PictureInitial size-class="w-10 h-10"
                                                                            background-class="bg-primary-400"
                                                                            font-class="font-medium text-white text-md"
                                                                            :name="person.name" />
                                                                        <span
                                                                            :class="[person.online ? 'bg-green-400' : 'bg-gray-300', 'absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white']"
                                                                            aria-hidden="true" />
                                                                    </span>
                                                                    <div class="ml-4 truncate">
                                                                        <p
                                                                            class="text-sm font-medium text-gray-900 truncate">
                                                                            {{ person.name }}</p>
                                                                        <p class="text-sm text-gray-500 truncate">
                                                                            @User</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full px-4 py-4 shadow" v-if="peopleIndexSelected !== null">
                                        <form @submit.prevent="messageStore.send"
                                            class="flex items-center justify-between flex-shrink-0">
                                            <InputText class-name="w-full mr-4 py-2 px-4" placeholder="Tulis pesan di sini"
                                                :value="messageStore.message"
                                                @update:value="messageStore.message = $event" />

                                            <button type="submit" :disabled="messageStore.isSending"
                                                class="text-sm font-bold text-white bg-transparent border-transparent rounded-full w-7 h-7 focus:outline-0 focus:ring-0">
                                                <PaperAirplaneIcon class="pointer-events-none w-7 h-7 text-primary-500"
                                                    aria-hidden="true" />
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import { useMessageStore } from '@/stores/message';
import { ChatBubbleLeftRightIcon, DocumentArrowUpIcon, PaperAirplaneIcon } from '@heroicons/vue/24/solid';
import InputText from '@/components/InputText.vue'
import PictureInitial from '@/components/PictureInitial.vue'

const messageStore = useMessageStore()
const props = defineProps({ open: Boolean })
const emit = defineEmits(['onClose'])
const open = ref(props.open)

const peopleIndexSelected = ref(null)

const people = [
    {
        id: 1,
        name: 'Ajeng Sindia',
        image: 'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
    {
        id: 2,
        name: 'Jamaludin',
        image: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
    {
        id: 3,
        name: 'Kumara',
        image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
    {
        id: 4,
        name: 'Bellayanti',
        image: 'https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
    {
        id: 5,
        name: 'Jefri',
        image: 'https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
    {
        id: 6,
        name: 'Kinanti',
        image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        online: false
    },
]

function selectPeople(value: any) {
    peopleIndexSelected.value = value
}

function close() {
    open.value = false
    emit('onClose')
}

watch(() => props.open, (value) => {
    open.value = value;
});
</script>