<!--
/**
 * @fileoverview Task component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <g
    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-task-wrapper"
    :style="{
      ...root.style['chart-row-bar-wrapper'],
      ...root.style['chart-row-task-wrapper'],
      ...task.style['chart-row-bar-wrapper']
    }"
  >
    <foreignObject
      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--task"
      :style="{
        ...root.style['chart-expander'],
        ...root.style['chart-expander--task'],
        ...task.style['chart-expander']
      }"
      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
      :width="root.state.options.chart.expander.size"
      :height="root.state.options.chart.expander.size"
      v-if="displayExpander"
    >
      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
    </foreignObject>
    <svg
      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-task"
      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-task'], ...task.style['chart-row-bar'] }"
      :x="task.x"
      :y="task.y"
      :width="task.width"
      :height="task.height"
      :viewBox="`0 0 ${task.width} ${task.height}`"
      @click="onBarClick($event)"
      @mouseenter="emitEvent('mouseenter', $event)"
      @mouseover="emitEvent('mouseover', $event)"
      @mouseout="emitEvent('mouseout', $event)"
      @mousemove="emitEvent('mousemove', $event)"
      @mousedown="emitEvent('mousedown', $event)"
      @mouseup="emitEvent('mouseup', $event)"
      @mousewheel="emitEvent('mousewheel', $event)"
      @touchstart="emitEvent('touchstart', $event)"
      @touchmove="emitEvent('touchmove', $event)"
      @touchend="emitEvent('touchend', $event)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
        x="0"
        y="0"
        width="100%"
        height="100%"
        rx="5"
        ry="5"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-task-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
      ></rect>
    </svg>
    <foreignObject
      v-if="root.state.options.chart.title.display"
      :x="task.x - root.state.options.chart.title.offsetX"
      :y="task.y - root.state.options.chart.title.offsetY"
      :width="task.width"
      :height="task.height"
    >
      <div
        xmlns="http://www.w3.org/1999/xhtml"
        class="gantt-elastic__chart-row-title-wrapper"
        :task="task"
        :style="{ ...task.style['chart-row-title-wrapper'] }"
      >
        <div
          class="gantt-elastic__chart-row-title-text"
          :task="task"
          :style="{ ...task.style['chart-row-title-text'], ...task.style['chart-row-title-text--text'] }"
          v-if="!root.state.options.chart.title.html"
        >
          {{task.title}}
        </div>
        <div
          class="gantt-elastic__chart-row-title-text"
          :task="task"
          :style="{ ...task.style['chart-row-title-text'], ...task.style['chart-row-title-text--html'] }"
          v-if="root.state.options.chart.title.html"
          v-html="task.title"
        >
        </div>
      </div>
    </foreignObject>
    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
  </g>
</template>

<script>
import ChartText from '../Text.vue';
import Expander from '../../Expander.vue';
import taskMixin from './Task.mixin.js';
export default {
  name: 'Task',
  components: {
    ChartText,
    Expander
  },
  inject: ['root'],
  props: ['task'],
  mixins: [taskMixin],
  computed: {
    /**
     * Get clip path id
     *
     * @returns {string}
     */
    clipPathId() {
      return 'gantt-elastic__task-clip-path-' + this.task.id;
    }
  }
};
</script>
