<template>
    <div class="flex-1 h-full overflow-y-auto overflow-x-clip overflow-hidden flex border border-surface rounded-2xl">
        <div class="w-4/12 xl:w-3/12 min-w-40 overflow-auto flex flex-col gap-6">
            <div class="flex flex-col gap-6 pt-3 pb-2 -mb-2 px-5 sticky top-0 bg-surface-0 dark:bg-surface-950 z-10">
                <div class="flex items-center justify-between gap-6 text-color">
                    <div class="text-2xl font-medium lead">Chats</div>
                    <Button icon="pi pi-plus" text />
                </div>
            </div>
            <div class="px-5">
                <IconField iconPosition="left">
                    <InputIcon class="pi pi-search"> </InputIcon>
                    <InputText v-model="search" placeholder="Search" class="w-full" />
                </IconField>
            </div>
            <div class="w-full px-5">
                <SelectButton
                    v-model="value"
                    :options="options"
                    aria-labelledby="basic"
                    :pt="{
                        root: {
                            class: 'w-full'
                        },
                        pcbutton: {
                            root: {
                                class: 'flex-1'
                            }
                        }
                    }"
                />
            </div>
            <div class="flex-1 flex flex-col">
                <div
                    v-for="chat in chats"
                    :key="chat.name"
                    class="flex items-center gap-2 p-4 cursor-pointer hover:bg-emphasis transition-all"
                    :class="{
                        'bg-emphasis': chat.name === activeChat
                    }"
                >
                    <div class="relative">
                        <div v-if="chat.active !== undefined" class="absolute top-0 right-0 p-[1px] bg-surface-0 dark:bg-surface-950 rounded-full flex items-center justify-center">
                            <Badge :severity="chat.active ? 'success' : 'danger'" class="p-1.5"></Badge>
                        </div>
                        <Avatar
                            v-bind="chat.image ? { image: chat.image } : { label: chat.capName }"
                            :class="{
                                '!bg-primary-100 !text-primary-950': !chat.image
                            }"
                            class="text-base font-medium flex"
                            size="large"
                            shape="circle"
                        />
                    </div>
                    <div class="flex-1">
                        <div class="flex items-start gap-1 justify-between">
                            <div class="text-color font-medium leading-6">{{ chat.name }}</div>
                            <div class="text-sm text-muted-color leading-5">{{ chat.time }}</div>
                        </div>
                        <div class="flex items-center gap-5 justify-between mt-1">
                            <div class="text-muted-color text-sm leading-5 line-clamp-1">{{ chat.lastMessage }}</div>
                            <Badge v-if="chat.unreadMessageCount > 0" :value="chat.unreadMessageCount" severity="contrast"></Badge>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-8/12 xl:w-6/12 border-x border-surface flex flex-col">
            <div class="flex items-center p-4 gap-7 border-b border-surface">
                <div class="flex items-center">
                    <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="mr-2 av" size="large" shape="circle" />
                    <div class="flex-1">
                        <div class="text-color leading-6 cursor-pointer hover:text-muted-color-emphasis transition-colors">PrimeTek</div>
                        <div class="text-muted-color leading-5 line-clamp-1 mt-1">Cody Fisher, Esther Howard, Jerome Bell, Kristin Watson, Ronald Richards, Darrell Steward</div>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <Button icon="pi pi-phone" text />
                    <Button icon="pi pi-search" text />
                    <Button type="button" icon="pi pi-ellipsis-h" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
                </div>
            </div>
            <div class="flex-1 overflow-y-auto flex flex-col gap-8 py-8 px-6">
                <div v-for="message in chatMessages" :key="message.id" class="flex items-start min-w-64 w-fit max-w-[60%]" :class="{ 'ml-auto mr-0 flex-row-reverse': message.type === 'sent' }">
                    <div
                        class="flex items-center gap-2 sticky top-0 transition-all"
                        :class="{
                            'flex-row-reverse': message.type === 'sent'
                        }"
                    >
                        <Avatar
                            v-bind="message.image ? { image: message.image } : { label: message.capName }"
                            :class="{
                                'bg-primary-100 text-primary-950': !message.image
                            }"
                            class="w-10 h-10 text-sm font-medium"
                            shape="circle"
                        />
                        <div>
                            <svg :class="message.type === 'received' ? 'fill-surface-100 dark:fill-surface-800' : 'fill-primary rotate-180'" class="" xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
                                <path d="M1.79256 7.09551C0.516424 6.31565 0.516426 4.46224 1.79256 3.68238L7 0.500055L7 10.2778L1.79256 7.09551Z" />
                            </svg>
                        </div>
                    </div>
                    <div :class="message.type === 'received' ? 'flex-1 bg-surface-100 dark:bg-surface-800 px-2 py-1 rounded-lg' : 'flex-1 bg-primary px-2 py-1 rounded-lg'">
                        <p :class="message.type === 'received' ? 'text-color leading-6 mb-0' : 'text-primary-contrast leading-6 mb-0'">
                            {{ message.message }}
                        </p>
                        <div v-if="message.attachment" :class="message.type === 'received' ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary-emphasis'" class="mt-2 w-full rounded-lg mb-0.5 hover:opacity-75 transition-all">
                            <img class="w-full h-auto block cursor-pointer" :src="message.attachment" alt="Message Image" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4 border-t border-surface flex items-end justify-between gap-2">
                <div class="flex items-end gap-1 flex-1">
                    <Button icon="pi pi-face-smile" text />
                    <Button icon="pi pi-paperclip" text />
                    <Textarea class="ml-1 flex-1 border-0 shadow-none max-h-32 min-h-9 bg-emphasis overflow-auto" autoResize rows="1" placeholder="Write your message..." />
                </div>
                <Button icon="pi pi-send" />
            </div>
        </div>
        <div class="w-3/12 xl:block hidden min-w-40 py-6 px-3 overflow-auto">
            <div class="flex flex-col items-center justify-center">
                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="w-32 h-32" size="xlarge" shape="circle" />
                <div class="leading-6 font-medium text-color mt-4 w-full text-center">PrimeTek</div>
                <div class="leading-5 text-sm text-muted-color mt-1 w-full text-center">@primetek</div>
                <div class="flex items-center justify-center flex-wrap gap-1 mt-4">
                    <Button icon="pi pi-phone text-muted-color" severity="secondary" text />
                    <Button icon="pi pi-video text-muted-color" severity="secondary" text />
                    <Button icon="pi pi-sign-in text-muted-color" severity="secondary" text />
                    <Button icon="pi pi-info-circle text-muted-color" severity="secondary" text />
                    <Button type="button" icon="pi pi-ellipsis-v text-muted-color" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
                </div>
            </div>
            <div class="flex flex-col gap-4 mt-4">
                <div class="flex items-center gap-2">
                    <i class="pi pi-bell text-color"></i>
                    <div class="leading-6 font-medium text-color flex-1">Notification</div>
                    <ToggleSwitch v-model="notification" />
                </div>
                <div class="flex items-center gap-2">
                    <i class="pi pi-volume-down text-color"></i>
                    <div class="leading-6 font-medium text-color flex-1">Sound</div>
                    <ToggleSwitch v-model="sound" />
                </div>
                <div class="flex items-center gap-2">
                    <i class="pi pi-download text-color"></i>
                    <div class="leading-6 font-medium text-color flex-1">Save to downloads</div>
                    <ToggleSwitch v-model="download" />
                </div>
            </div>
            <div class="mt-6">
                <div class="flex items-center gap-2">
                    <div class="flex-1 text-color leading-6 font-medium">Members</div>
                    <Button label="See All" class="text-sm py-0.5 px-2 text-muted-color" text />
                </div>
                <div class="mt-4 flex flex-col gap-4">
                    <div v-for="member in members" :key="member.name" class="flex items-center gap-2 cursor-pointer">
                        <Avatar
                            v-bind="member.image ? { image: member.image } : { label: member.capName }"
                            :class="{
                                'bg-orange-100 text-orange-950': !member.image
                            }"
                            class="font-medium text-xs"
                            shape="circle"
                        />
                        <div class="text-sm text-color hover:text-muted-color-emphasis transition-colors font-medium leading-5 flex-1">
                            {{ member.name }}
                        </div>
                        <i class="pi pi-chevron-right text-xs text-muted-color"></i>
                    </div>
                </div>
            </div>
            <div class="mt-5">
                <SelectButton
                    v-model="media"
                    :options="mediaOptions"
                    :pt="{
                        root: {
                            class: 'w-full'
                        },
                        pcbutton: {
                            root: {
                                class: 'flex-1'
                            }
                        }
                    }"
                />
                <div class="mt-3 mb-5 grid grid-cols-3 gap-2">
                    <div v-for="(media, index) in chatMedia" :key="index" class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer">
                        <img class="w-full h-full object-cover block" :src="media" alt="Media Image" />
                    </div>
                    <div class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer flex items-center justify-center">
                        <span class="text-muted-color font-medium">99+</span>
                    </div>
                </div>
                <Button
                    label="Show more"
                    icon="pi pi-arrow-right"
                    iconPos="right"
                    outlined
                    class="w-full text-left"
                    :pt="{
                        root: {
                            class: 'justify-between'
                        }
                    }"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Chat',
    redrawListener: null,
    data() {
        return {
            search: '',
            download: false,
            notification: true,
            sound: false,
            value: 'Chat',
            value2: '',
            options: ['Chat', 'Call'],
            media: 'Media',
            mediaOptions: ['Media', 'Link', 'Docs'],
            activeChat: 'PrimeTek Team',
            menuItems: [
                {
                    label: 'Group Info',
                    icon: 'pi pi-info-circle'
                },
                {
                    label: 'Leave group',
                    icon: 'pi pi-sign-out'
                }
            ],
            chats: [
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
                    name: 'Cody Fisher',
                    capName: 'CF',
                    active: true,
                    unreadMessageCount: 8,
                    time: '12.30',
                    lastMessage: "Hey there! I've heard about PrimeVue. Any cool tips for getting started?"
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png',
                    name: 'PrimeTek Team',
                    capName: 'PT',
                    active: undefined,
                    unreadMessageCount: 0,
                    time: '11.15',
                    lastMessage: "Let's implement PrimeVue. Elevating our UI game! 🚀"
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
                    name: 'Jerome Bell',
                    capName: 'JB',
                    active: true,
                    unreadMessageCount: 4,
                    time: '11.15',
                    lastMessage: "Absolutely! PrimeVue's documentation is gold—simplifies our UI work."
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
                    name: 'Robert Fox',
                    capName: 'RF',
                    active: false,
                    unreadMessageCount: 0,
                    time: '11.15',
                    lastMessage: "Interesting! PrimeVue sounds amazing. What's your favorite feature?"
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
                    name: 'Esther Howard',
                    capName: 'EH',
                    active: true,
                    unreadMessageCount: 9,
                    time: '11.15',
                    lastMessage: 'Quick one, team! Anyone using PrimeVue for mobile app development?'
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
                    name: 'Darlene Robertson',
                    capName: 'DR',
                    active: false,
                    unreadMessageCount: 0,
                    time: '11.15',
                    lastMessage: "Just explored PrimeVue's themes. Can we talk about those stunning designs? 😍"
                },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
                    name: 'Ralph Edwards',
                    capName: 'RE',
                    active: false,
                    unreadMessageCount: 0,
                    time: '11.15',
                    lastMessage: 'PrimeVue is a game-changer, right? What are your thoughts, folks?'
                },
                { image: '', name: 'Ronald Richards', capName: 'RR', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: "Jumping in! PrimeVue's community forum is buzzing. Any engaging discussions?" },
                { image: '', name: 'Kristin Watson', capName: 'KW', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: 'Sharing a quick win-PrimeVue tutorials are leveling up my UI skills. 👩‍💻' },
                {
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
                    name: 'Darrell Steward',
                    capName: 'DS',
                    active: false,
                    unreadMessageCount: 0,
                    time: '11.15',
                    lastMessage: "Reflecting on PrimeVue's impact on our workflow. What's your take?"
                }
            ],
            chatMessages: [
                { id: 1, attachment: '', name: '', image: '', capName: 'OS', type: 'received', message: "Awesome! What's the standout feature?" },
                { id: 2, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'PrimeVue rocks! Simplifies UI dev with versatile components.' },
                { id: 3, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', capName: 'A', type: 'received', message: 'Intriguing! Tell us more about its impact.' },
                {
                    id: 4,
                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
                    capName: 'A',
                    type: 'received',
                    message: "It's design-neutral and compatible with Tailwind. Features accessible, high-grade components!"
                },
                { id: 5, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png', capName: 'A', type: 'sent', message: 'Customizable themes, responsive design – UI excellence!' },
                { id: 6, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'Love it! Fast-tracking our development is key.' },
                { id: 7, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', capName: 'A', type: 'received', message: 'Documentation rocks too – smooth integration for all.' },
                {
                    id: 8,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
                    capName: 'B',
                    type: 'sent',
                    message: 'The flexibility and ease of use are truly impressive. Have you explored the new components?'
                },
                {
                    id: 9,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
                    capName: 'C',
                    type: 'received',
                    message: 'Absolutely, the new calendar component has saved us a ton of development time!'
                },
                {
                    id: 10,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
                    capName: 'D',
                    type: 'received',
                    message: "And the accessibility features are top-notch. It's great to see a library focusing on inclusivity."
                },
                {
                    id: 11,
                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
                    capName: 'E',
                    type: 'sent',
                    message: "I couldn't agree more. Plus, the documentation is incredibly thorough, which makes onboarding new team members a breeze."
                },
                {
                    id: 12,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
                    capName: 'F',
                    type: 'received',
                    message: 'Do you have any tips for optimizing performance when using multiple complex components?'
                },
                {
                    id: 13,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
                    capName: 'G',
                    type: 'received',
                    message: 'Yes! Lazy loading and code splitting can make a huge difference, especially in larger applications.'
                },
                {
                    id: 14,
                    attachment: '',
                    name: '',
                    image: '',
                    capName: 'HS',
                    type: 'received',
                    message: "I've also found that leveraging the component's internal state management capabilities can help streamline data flow and improve performance."
                },
                {
                    id: 15,
                    attachment: '',
                    name: '',
                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
                    capName: 'H',
                    type: 'sent',
                    message: "That's great advice. It's amazing how much detail and thought has gone into making PrimeVue such a powerful tool for developers."
                }
            ],
            chatMedia: [
                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image1.png',
                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image2.png',
                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image3.png',
                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image4.png',
                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image5.png'
            ],
            members: [
                { name: 'Robin Jonas', capName: 'RJ', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png' },
                { name: 'Cameron Williamson', capName: 'CW', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg' },
                { name: 'Eleanor Pena', capName: 'EP', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png' },
                { name: 'Arlene McCoy', capName: 'AM', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png' },
                { name: 'Dianne Russell', capName: 'DR', image: '' }
            ]
        };
    },
    methods: {
        toggle(event) {
            this.$refs.menu.toggle(event);
        }
    },
    components: {}
};
</script>