<template>
  <div class="timeline">
    <div class="main-line">
      <Tooltip
        v-if="hoveredId !== 0"
        :hoveredId="hoveredId"
        :leftShift="databases[hoveredId - 1].posX + tickWidth / 2 + 10"
        :topShift="-75"
        :title="databases[hoveredId - 1].title"
        :message="databases[hoveredId - 1].message"
      />

      <div
        v-for="(d, i) in times"
        :key="'ticks' + i"
        class="timeline-tick"
        :style="{ width: tickWidth + 'px' }"
      >
        <p class="timestamp">{{ d.date }}</p>
      </div>
      <div class="timeline-tick endtick">
        <p class="timestamp">{{ formatDate(mockedEndDate /*end*/) }}</p>
      </div>
      <div
        v-for="(d, i) in databases"
        :key="'databases' + i"
        class="above-mainline"
        :style="{ left: d.posX - tickWidth * i + 'px' }"
      >
        <div
          class="database"
          :style="{
            width: tickWidth + 'px',
            'padding-left': tickWidth / 2 + 'px'
          }"
        >
          <font-awesome-icon
            :width="12"
            :height="12"
            icon="database"
            class="database-icon"
            @mouseover="hoveredId = d.id"
            @mouseout="hoveredId = 0"
          />
          <div
            class="database-line"
            :style="{
              height: 100 + 13 * branches.length + 'px'
            }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tooltip from '@/components/shared/Tooltip.vue'
import Vue from 'vue'
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  components: { Tooltip },
  props: {
    databases: {
      // updates with database icon
      type: Array,
      required: false,
      default() {
        return [
          {
            date: new Date(2020, 1, 28),
            id: 1,
            title: 'Database update',
            message: 'New information'
          }
          // { date: new Date(2020, 2, 5), id: 2, title: 'title2', message: 'msg2' }
        ]
      }
    },
    start: {
      type: Date,
      required: false,
      default() {
        return new Date(2020, 2, 2)
      }
    },
    end: {
      type: Date,
      required: false,
      default() {
        return new Date(2020, 2, 7)
      }
    },
    newNotificationTime: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      hoveredId: 0, // id of hovered database icon .... why not -1?
      tickWidth: 100,
      mockedStartDate: moment('2020-04-20'),
      mockedEndDate: moment('2020-04-27') //moment().add(1, 'days')
    }
  },
  computed: {
    ...mapState('workspace', ['branches', 'commits']),
    times() {
      let times = []
      let id = 0
      let currentDate = this.mockedStartDate //this.start
      let endDate = this.mockedEndDate //this.end
      //currentDate.getTime() + ' , ' + currentDate.getHours()
      // currentDate = this.addHours(currentDate, 24)
      for (currentDate; currentDate < endDate; currentDate.add(1, 'days')) {
        times.push({
          date: this.formatDate(currentDate),
          id: id
        })
        id++
      }
      return times
    },

    // ticks() {
    //   let ticks = []

    //   this.commits.forEach(c => {
    //     c.
    //   })

    //   return ticks
    // },

    // x pos of databases (icons and lines)
    positionX() {
      this.databases.forEach(d => {
        let currentDate = this.formatDate(d.date)
        // TODO: this just matches found date and then we do padding-left=50px from that spot
        let date = this.times.find(t => t.date === currentDate)
        //if (currentDate > this.formatDate(this.end)) // TODO

        let id = date ? date.id : 0
        Vue.set(d, 'posX', id * this.tickWidth)
      })
      return this.databases
    }
  },
  watch: {
    deep: true,
    positionX: {
      handler() {
        return this.databases
      }
    },
    times: {
      handler() {
        return this.times
      }
    },
    tickWidth() {
      return this.tickWidth
    },
    newNotificationTime() {
      let db = {
        date: new Date(this.newNotificationTime),
        id: this.databases.length + 1,
        title: 'Database update',
        message: 'New information'
      }
      this.databases.push(db)
    }
  },
  methods: {
    addHours(date, h) {
      date.setTime(date.getTime() + h * 60 * 60 * 1000)
      return date
    },
    formatDate(date) {
      const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date)
      const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(date)
      const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date)

      return `${day} ${month} ${year}`
    }
  }
}
</script>

<style lang="sass" scoped>
.timeline
  padding-left: 80px
  height: 60px
  //width: 100vw

.main-line
  position: absolute
  border-top: 2px solid #ccc
  height: 50px
  top: 40px

.timeline-tick
  position: relative
  display: table-cell //inline-block
  padding-top: 10px
  &.endtick
    width: 0

.timeline-tick::after
  content: ''
  position: absolute
  width: 2px
  height: 10px
  background: #ccc
  top: -6px
  left: 0

.above-mainline
  position: relative
  top: -45px

.database
  //position: relative
  //display: inline-block
  //color: #ff0000
  float: left
  // width: 100px
  height: 50px
  // padding-left: 50px
  //top: -20px
  //text-align: center

.database-icon
  position: relative
  top: -20px
  left: -5px
  display: inline-block
  color: #888888

.database-line
  position: absolute
  //height: 100px
  width: 1px
  top: 5px
  border-left: 2px dotted #888888 //#ff0000

.timestamp
  position: absolute
  font-size: 11px
  width: 100px
  // color: #888888
  left: -30px
  top: -30px //-8px
</style>
