<template>
  <!-- <BaseCollapsibleCard class="right">
    <template #header-title>{{ title }}</template>
    <template #content> -->
  <div>
    <div class="report-text">
      <input
        v-model="commit.title"
        placeholder="Commit title"
        size="is-small"
        class="input report-input"
        style="width: 75%"
      />
      <b-button
        size="is-small"
        type="is-dark"
        outlined
        class="float-button"
        @click="$emit('switch-to-comparison')"
      >
        Merge
      </b-button>
      <ckeditor
        :editor="editor"
        v-model="commit.message"
        :config="editorConfig"
        style="margin: 0.5rem 0; height: 90px; font-size: 12px; overflow-y: auto"
      />
      <!--
      <input
        v-model="timestamp"
        placeholder="Commit timestamp"
        size="is-small"
        class="input report-input"
        readonly
      /> -->
    </div>
    <div class="tags">
      <span v-for="(report, i) in reports" :key="i" class="tag" style="cursor: pointer">
        {{ report.title }}
      </span>
      <span class="tag newTag">
        + add tag
      </span>
      <p class="timestamp">{{ commit.timestamp }}</p>
    </div>
  </div>
  <!-- </template>
  </BaseCollapsibleCard> -->
</template>

<script>
import editors from '@/utils/editors'

export default {
  props: {
    commit: Object,
    message: String,
    timestamp: String,
    title: String,
    reports: {
      type: Array,
      required: false,
      default: () => [
        {
          title: 'Report 0',
          text: 'Lorem ipsum',
          order: 0
        },
        {
          title: 'Report 1',
          text: 'Lorem ipsum',
          order: 1
        }
      ]
    }
  },
  data() {
    return {
      editor: editors.BalloonEditor,
      editorConfig: {}
    }
  }
}
</script>

<style lang="sass" scoped>
.right
  position: absolute
  right: 4rem
  bottom: -5rem

.report-input
  border: 0.2px
  border-color: pink !important
  border-style: none !important
  &:hover
    border-style: none none solid none !important
    border-color: gray !important
  box-shadow: none !important
  border-radius: inherit !important
  font-size: 0.8rem
  font-weight: 500
  color: $primary-text-color

.report-textarea
  height: 80px !important
  min-height: 80px !important
  font-weight: normal

.report-title
  display: block
  width: auto
  height: auto
  min-height: 10px

.newTag
  // color: #919191
  cursor: pointer
  opacity: 0.5
  &:hover
    opacity: 1

.float-button
  position: absolute
  right: 0.5rem

.timestamp
  color: #919191
  font-size: 0.8rem
</style>
