<template>
  <div class="bg-zinc-50">
    <div class="flex flex-row justify-center py-5">
      <ul class="justify-around">
        <li
          v-for="comment in contract.comments"
          :key="comment.id"
          class="bg-white rounded-lg shadow-2xl mb-4">
          <div
            class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
            <div class="relative flex gap-4">
              <font-awesome-icon
                icon="fa-solid fa-user-large"
                class="relative -mb-4 bg-white h-11 w-11" />
              <div class="flex flex-col w-full">
                <div class="flex flex-row justify-between">
                  <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">
                    {{ comment.name }}
                  </p>
                  <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
                </div>
                <p class="text-gray-400 text-sm">{{ new Date(comment.date).toDateString() }}</p>
              </div>
            </div>
            <p class="-mt-4 text-gray-500">{{ comment.message }}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="flex justify-center">
      <div class="py-4 mb-10 shadow-2xl">
        <form
          class="w-full max-w-xl bg-white rounded-lg px-4 pt-2"
          @submit.prevent
          @submit="postComment()">
          <div class="flex flex-wrap -mx-3 mb-6">
            <h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
            <div class="w-full md:w-full px-3 mb-2 mt-2">
              <textarea
                v-model="message"
                class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white"
                name="body"
                placeholder="Type Your Comment"
                required></textarea>
            </div>
            <div class="w-full md:w-full flex items-start px-3">
              <div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
              <div class="-mr-1">
                <input
                  type="submit"
                  class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100"
                  value="Post Comment" />
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { saveComment } from '../../service/ContractsService'

export default {
  props: {
    contract: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      message: ''
    }
  },
  computed: {
    name() {
      return this.$store.state.keycloak.keycloak.tokenParsed.name
    }
  },
  methods: {
    postComment() {
      if (this.message === '') return

      const comment = {
        name: this.name,
        text: this.message,
        date: new Date()
      }

      saveComment(comment)
      this.$router.go()
    }
  }
}
</script>
