<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<script setup>
//Fix v-if riga 20
import ChatPreview from "@/components/ChatPreview.vue";
import ChatView from "./single_chat/ChatView.vue";
</script>

<template>
  <!-- Fix nested conditions in ChatPreview -->
  <div id="background chat-list">
    <ChatPreview
      v-for="chat in $options.demo_chats.history"
      v-if="!selectedChat"
      :key="chat.id"
      :chat-picture="chat.picture"
      :chat-name="chat.name"
      :chat-last-message="chat.last_message"
      :chat-seen="chat.seen"
      :chat-date="chat.date"
      :chat-new-messages="chat.new_messages"
      @click="showChat(chat)"
    />
    <ChatView v-if="selectedChat" :chat-id="chatId" @hideChat="hideChat" />
  </div>
</template>

<script>
import demo_chats_json from "../assets/demo_chats.json";
export default {
  demo_chats: demo_chats_json,
  data() {
    return { selectedChat: false, chatId: null };
  },
  methods: {
    showChat(chat) {
      this.$emit("change-header", [chat.picture, chat.name]);
      this.selectedChat = !this.selectedChat;
      this.chatId = chat.id;
    },
    hideChat() {
      this.selectedChat = false;
    },
  },
};
</script>

<style scoped></style>
