<script setup lang="ts">
import type { Message } from '@/views/LogBookView.vue'
import { computed } from 'vue'

const props = defineProps<{
  message: Message
}>()
const date = computed(() => {
  const b = props.message.createdAt.split(/\D+/)
  const offsetMult = props.message.createdAt.indexOf('+') !== -1 ? -1 : 1
  const hrOffset = offsetMult * (+b[7] || 0)
  const minOffset = offsetMult * (+b[8] || 0)
  return new Date(
    Date.UTC(+b[0], +b[1] - 1, +b[2], +b[3] + hrOffset, +b[4] + minOffset, +b[5], +b[6] || 0)
  )
})
</script>
<template>
  <div class="logbook-message">
    <p v-text="message.message"></p>
    <div>
      <small>sent by <span v-text="message.name" style="color: var(--code-color)"></span></small>
    </div>
    <div>
      <small><time :datetime="date.toISOString()" v-text="date.toLocaleString()"></time></small>
    </div>
  </div>
</template>
<style>
.logbook-message {
  background-color: var(--background-color-2);
  border-radius: 20px;
  padding: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.logbook-message > time {
  font-family: monospace;
}
.logbook-message > p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
</style>
