<template>
  <div class="row">
    <b-button
      type="is-dark"
      outlined
      style="float: right; margin-top: 1rem; margin-right: 1.2rem "
      @click="toast"
    >
      Save
    </b-button>

    <div class="card" style="padding-top: 0px; margin-top: 0px">
      <section class="card-content">
        <div class="wrapper-circles">
          <span v-for="r in reports" :key="r.order" @click="selectedReport = r.order">
            <div v-if="r.order == selectedReport" class="circle selected" />
            <div v-else class="circle" />
          </span>
        </div>
        <div class="report-text">
          <input
            v-model="reports[selectedReport].title"
            placeholder="Report title"
            size="is-small"
            class="input report-input"
          />
          <textarea
            v-model="reports[selectedReport].text"
            placeholder="Report description"
            size="is-small"
            class="textarea has-fixed-size report-input report-textarea report-description"
          />
        </div>
        <!-- <b-button size="is-small" type="is-dark" class="button" @click="emitSave">Save</b-button> -->
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    reports: {
      type: Array,
      required: false,
      default: () => [
        {
          title: 'Commit Title 0',
          text: 'Lorem ipsum',
          order: 0
        },
        {
          title: 'Commit Title 1',
          text: 'Lorem ipsum',
          order: 1
        },
        {
          title: 'Commit Title 2',
          text: 'Lorem ipsum',
          order: 2
        },
        {
          title: 'Commit Title 3',
          text: 'Lorem ipsum',
          order: 3
        },
        {
          title: 'Commit Title 4',
          text: 'Lorem ipsum',
          order: 4
        }
      ]
    }
  },
  data() {
    return {
      selectedReport: 0
    }
  },
  methods: {
    emitSave() {
      this.$emit('save-report-message', {
        title: this.reports[this.selectedReport].title,
        message: this.reports[this.selectedReport].text
      })
    },
    toast() {
      this.$buefy.toast.open('Report document saved')
    }
  }
}
</script>

<style lang="sass" scoped>
.row
  display: block
  // position: relative
  position: absolute
  top: 0
  background-color: rgba(255,255,255,0.9)
  // opacity: 0.2
  width: 100%
  // border: none none solid none
  box-shadow: 1px 1px 10px #eee


.wrapper-circles
  display: block
  margin: auto
  margin-top: -15px
  text-align: center
  height: 30px
  // cursor: pointer

.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-text
  // display: block
  // margin: auto
  // text-align: center
  // width: auto
  // height: auto

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

.circle
  background: #c8cccc
  border-radius: 50%
  width: 8px
  height: 8px
  margin-right: 8px
  display: inline-block
  cursor: pointer
  &.selected
    background: #ff8a70

.card
  display: block
  background-color: white
  // margin: auto
  margin-left: 42%
  height: auto
  width: 400px
  box-shadow: none !important

.card-content
  display: block
  margin: auto
  height: auto

.card-label
  font-size: $card-section-title-size
  font-weight: $card-section-title-weight
  color: $card-section-title-color

.text-field
  font-size: $card-text-field-size
  font-weight: $card-text-field-weight
  color: $card-text-field-color
  min-height: 40vh !important
</style>
