<!--
/**
 * @fileoverview Days highlight component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->

<template>
  <g
    v-if="showWorkingDays"
    :style="{ ...root.style['chart-days-highlight-container'] }"
    class="gantt-elastic__chart-days-highlight-container"
  >
    <rect
      v-for="day in workingDays"
      :key="getKey(day)"
      :x="day.offset.px"
      :width="day.width.px"
      :style="{ ...root.style['chart-days-highlight-rect'] }"
      class="gantt-elastic__chart-days-highlight-rect"
      y="0"
      height="100%"
    />
  </g>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'DaysHighlight',
  inject: ['root'],
  data() {
    return {}
  },
  computed: {
    /**
     * Get working days
     *
     * @returns {array}
     */
    workingDays() {
      return this.root.state.options.times.steps.filter(step => {
        return this.root.state.options.calendar.workingDays.indexOf(dayjs(step.time).day()) === -1
      })
    },

    /**
     * Show working days?
     *
     * @returns {bool}
     */
    showWorkingDays() {
      const calendar = this.root.state.options.calendar
      if (
        typeof calendar.workingDays !== 'undefined' &&
        Array.isArray(calendar.workingDays) &&
        calendar.workingDays.length
      ) {
        return true
      }
      return false
    }
  },
  methods: {
    /**
     * Get key
     *
     * @param {object} day
     * @returns {string} key ideintifier for loop
     */
    getKey(day) {
      return dayjs(day.time).format('YYYY-MM-DD')
    }
  }
}
</script>
