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

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

<script>
export default {
  writeMessage: Boolean,
  setup() {
    this.writeMessage = false;
    console.log(this.writeMessage);
  },
  props: { chatId: Number },
};
</script>

<style scoped></style>
