<script setup lang="ts" name="PreviewNodesStart">
import { computed } from 'vue'
import Outline from '../modules/Outline.vue'

const props = defineProps<{
  x: number
  y: number
}>()

const matrix = computed(() => `matrix(1 0 0 1 ${props.x} ${props.y})`)
</script>

<template>
  <g
    class="fv-element fv-shape"
    :transform="matrix">
    <g class="fv-visual">
      <defs>
        <circle
          id="path-1"
          cx="20"
          cy="20"
          r="20"/>
        <filter
          id="filter-2"
          x="-19.4%"
          y="-15.6%"
          width="153.8%"
          height="162.5%"
          filterUnits="objectBoundingBox">
          <feMorphology
            radius="1.5"
            operator="erode"
            in="SourceAlpha"
            result="shadowSpreadOuter1"/>
          <feOffset
            dx="2.4"
            dy="6.4"
            in="shadowSpreadOuter1"
            result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0.321568627   0 0 0 0 0.8   0 0 0 0 0.521568627  0 0 0 0.24166678 0" type="matrix" in="shadowBlurOuter1"/>
        </filter>
      </defs>
      <g
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd">
        <g>
          <use
            fill="black"
            fill-opacity="1"
            filter="url(#filter-2)"
            xlink:href="#path-1"/>
          <use fill="#52CC85" fill-rule="evenodd" xlink:href="#path-1"/>
        </g>
        <polygon
          fill="#FFFFFF"
          transform="translate(22.461111, 20) rotate(90) translate(-22.461111, -20) "
          points="22.4611111 14.75 31.1722222 25.25 13.75 25.25"/>
      </g>
    </g>
    <rect
      class="fv-hit fv-hit-all"
      x="0"
      y="0"
      width="40"
      height="40"
      style="fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;"/>
    <Outline :points="[[0,0],[40,40]]" />
  </g>
</template>
