<template>
  <div class="container">
    <div class="alert alert-success" v-if="ok">{{ ok }}</div>
    <div class="alert alert-danger" v-if="error">{{ error }}</div>
    <h1>Naujas atsiliepimas</h1>
    <div class="card my-4">
      <div class="row g-0">
        <div class="card-body">
          <h6 class="card-text text-muted">Pateikta: {{ issue.created }}</h6>
          <h6 class="card-text text-muted">El paštas: {{ issue.email }}</h6>
          <h6 class="card-text text-muted">
            Skelbtinas: {{ issue.publishable ? '✔' : '❌' }}
          </h6>
          <h6 class="card-text text-muted">
            Išsprestą: {{ issue.solved ? '✔' : '❌' }}
          </h6>
          <h6 class="card-text text-muted">
            Tipas: {{ issueTypes[issue.issueTypeId]?.name }}
          </h6>
          <h5 class="card-title">Aprašymas:</h5>
          <p class="card-text">{{ issue.description }}</p>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="card col-lg-6 p-5">
        <div class="mb-3">
          <label for="problemLtTextArea" class="form-label"
            >Lietuviškas Aprašymas</label
          >
          <textarea
            v-model="feedback.feedbackLt"
            class="form-control"
            id="problemLtTextArea"
            rows="4"
          ></textarea>
        </div>
        <div class="mb-3">
          <label for="problemEnTextArea" class="form-label"
            >Angliškas Aprašymas</label
          >
          <textarea
            v-model="feedback.feedbackEn"
            class="form-control"
            id="problemEnTextArea"
            rows="4"
          ></textarea>
        </div>
        <button @click="create" class="btn btn-primary btn-lg">
          Sukurti naują atsiliepimą
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { axios, authAxios } from '@/axios'

export default {
  data() {
    return {
      issue: null,
      issueTypes: {},
      feedback: {
        feedbackEn: '',
        feedbackLt: '',
        issueId: null,
      },
      ok: null,
      error: null,
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const response = await authAxios.get(
        `/api/Issues/${this.$route.params.id}`
      )
      this.issue = response.data
      const response2 = await axios.get('/api/IssueTypes')
      response2.data.forEach((it) => {
        this.issueTypes[it.id] = it
      })
    },
    async create() {
      try {
        this.feedback.issueId = this.issue.id
        await authAxios.post('/api/PublishedFeedbacks', this.feedback)
        this.ok = 'Sukurtą.'
      } catch (error) {
        this.error = error
      }
    },
  },
  watch: {
    $route: 'fetchData',
  },
}
</script>
