<script setup>
import MessageComposition from "../keyboard/MessageComposition.vue";
import ChatHistory from "./ChatHistory.vue";
</script>

<template>
  <div>
    <!-- Move this button in the header -->
    <div id="chat-view" v-show="!writeMessage">
      <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
      <ChatHistory :chat-id="chatId" />
      <button
        alt="write message"
        name="write-message"
        @click="this.writeMessage = true"
      >
        +
      </button>
    </div>
    <MessageComposition
      v-if="writeMessage"
      :chat-id="chatId"
      @hideMessageHistory="this.writeMessage = false"
    />
  </div>
</template>

<script>
export default {
  data() {
    return { writeMessage: false };
  },
  props: { chatId: Number },
};
</script>

<style scoped></style>
