<!--
/**
 * @fileoverview Chart component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <div ref="chart" :style="{ ...root.style['chart'] }" class="gantt-elastic__chart">
    <div
      ref="chartCalendarContainer"
      :style="{
        ...root.style['chart-calendar-container'],
        height: root.state.options.calendar.height + 'px',
        'margin-bottom': root.state.options.calendar.gap + 'px'
      }"
      class="gantt-elastic__chart-calendar-container"
    >
      <calendar/>
    </div>
    <div
      ref="chartGraphContainer"
      :style="{
        ...root.style['chart-graph-container'],
        height: '706px'
      }"
      class="gantt-elastic__chart-graph-container"
    >
      <div
        :style="{
          ...root.style['chart-area'],
          width: root.state.options.width + 'px',
          height: '706px'
        }"
      >
        <div
          ref="chartGraph"
          :style="{ ...root.style['chart-graph'], height: '100%' }"
          class="gantt-elastic__chart-graph"
        >
          <svg
            ref="chartGraphSvg"
            :style="{ ...root.style['chart-graph-svg'] }"
            :width="root.state.options.width + 'px'"
            :height="root.state.options.allVisibleTasksHeight + 1 + 'px'"
            style="border-bottom: 1px solid #00000050;"
            class="gantt-elastic__chart-graph-svg"
            x="0"
            y="0"
            xmlns="http://www.w3.org/2000/svg"
          >
            <days-highlight/>
            <grid/>
            <dependency-lines :tasks="root.visibleTasks"/>
            <g
              v-for="task in root.visibleTasks"
              :style="{ ...root.style['chart-row-wrapper'] }"
              :task="task"
              :key="task.id"
              class="gantt-elastic__chart-row-wrapper"
            >
              <component :task="task" :is="task.type"/>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Grid from './Grid.vue'
import DaysHighlight from './DaysHighlight.vue'
import Calendar from '../Calendar/Calendar1.vue'
import DependencyLines from './DependencyLines.vue'
import Task from './Row/Task.vue'
import Milestone from './Row/Milestone.vue'
import Project from './Row/Project.vue'
export default {
  name: 'Chart',
  components: {
    Grid,
    DependencyLines,
    Calendar,
    Task,
    Milestone,
    Project,
    DaysHighlight
  },
  inject: ['root'],
  data() {
    return {
      moving: false
    }
  },

  computed: {
    /**
     * Get view box
     *
     * @returns {string}
     */
    getViewBox() {
      return `0 0 ${this.root.state.options.width} ${this.root.state.options.allVisibleTasksHeight}`
    }
  },
  /**
   * Mounted
   */
  mounted() {
    this.root.state.refs.chart = this.$refs.chart
    this.root.state.refs.chartCalendarContainer = this.$refs.chartCalendarContainer
    this.root.state.refs.chartGraphContainer = this.$refs.chartGraphContainer
    this.root.state.refs.chartGraph = this.$refs.chartGraph
    this.root.state.refs.chartGraphSvg = this.$refs.chartGraphSvg
  }
}
</script>
