<template>
  <marker
    v-if="type === 'single-link-arrow'"
    id="single-link-arrow"
    class="marker"
    marker-units="userSpaceOnUse"
    view-box="0 -6 6 12"
    ref-x="29"
    ref-y="0"
    orient="auto"
    marker-width="14"
    marker-height="14"
    xoverflow="visible"
  >
    <polyline
      points="0,-4 4,0 0,4"
      stroke="#bbb"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1px"
      fill="none"
    ></polyline>
  </marker>

  <marker
    v-else-if="type === 'multi-link-arrow'"
    id="multi-link-arrow"
    class="marker"
    marker-units="userSpaceOnUse"
    view-box="-1 -2 9 4"
    ref-x="18"
    ref-y="0"
    orient="auto"
    marker-width="24"
    marker-height="15"
    xoverflow="visible"
  >
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="5.3,-1.7 7,0 5.3,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
  </marker>

  <marker
    v-else-if="type === 'multi-link-arrow-opposite'"
    id="multi-link-arrow-opposite"
    class="marker"
    marker-units="userSpaceOnUse"
    view-box="-1 -2 9 4"
    ref-x="-11"
    ref-y="0"
    orient="auto"
    marker-width="24"
    marker-height="15"
    xoverflow="visible"
  >
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="1.7,-1.7 0,0 1.7,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
  </marker>

  <marker
    v-else-if="type === 'multi-link-arrow-bar'"
    id="multi-link-arrow-bar"
    class="marker"
    marker-units="userSpaceOnUse"
    view-box="-1 -2 9 4"
    ref-x="18"
    ref-y="0"
    orient="auto"
    marker-width="24"
    marker-height="15"
    xoverflow="visible"
  >
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="3.5,-1.7 3.5,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="5.3,-1.7 7,0 5.3,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
  </marker>

  <marker
    v-else-if="type === 'multi-link-arrow-bar-opposite'"
    id="multi-link-arrow-bar-opposite"
    class="marker"
    marker-units="userSpaceOnUse"
    view-box="-1 -2 9 4"
    ref-x="-11"
    ref-y="0"
    orient="auto"
    marker-width="24"
    marker-height="15"
    xoverflow="visible"
  >
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="1.7,-1.7 0,0 1.7,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
    <polyline
      stroke-linejoin="round"
      stroke-linecap="round"
      points="3.5,-1.7 3.5,1.7"
      stroke="#ccc"
      stroke-width="1px"
      fill="none"
    />
  </marker>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true,
      validator: function(value) {
        return (
          [
            'single-link-arrow',
            'multi-link-arrow',
            'multi-link-arrow-opposite',
            'multi-link-arrow-bar',
            'multi-link-arrow-bar-opposite'
          ].indexOf(value) !== -1
        )
      }
    }
  }
}
</script>
