<template>
  <svg width="100%" height="100%" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <g v-if="iconSet == 1" stroke="none" :fill="fillColor" >
      <path d="M22,8.25 20.75,7.5 20.25,6.5 19,6 V5 L18.25,6 16,7.75 13.5,8.75 H8.5 L7,9 6,9.75 5,11 L4.25,12.5 3.5,14 2.5,15 2,15.5 2.5,15.75 3.5,15.5 4.5,14.25 5.5,12.25 6.75,10.75 7,12 7.25,13.25 6.5,15.5 7,19 H8 V 18.5 L7.5,18.25 7.75,15.75 9.75,12.25 12,13 15.25,13.5 15.5,17.25 16,19 H17 V18.5 L16.5,18.25 V15.5 L17,13 17.75,10.75 19,8.75 H20 L21.25,9 Z" style="opacity: .4;"/>
      <path v-if="region == 0" d="M16,7.75 13.5,8.75 12,13 15.25,13.5 17,13 17.75,10.75 Z" fill-rule="evenodd" :fill="fillColor" />
      <path v-else-if="region ==1" d="M13.5,8.75 H8.5 L7,9 6,9.75 5,11 4.25,12.5 3.5,14 2.5,15 2,15.5 2.5,15.75 3.5,15.5 4.5,14.25 5.5,12.25 6.75,10.75 7,12 9.75,12.25 12,13 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 2" d="M15,8.5 C14,8.5 13.25,9.25 13.25,10.25 C13.25,10.75 13.5,11.25 13.75,11.5 L15.25,13.5 15.5,17.25 16,19 H17 V18.5 L16.5,18.25 V15.5 L17,13 17.75,10.75 16.25,9 C16,8.75 15.5,8.5 15,8.5 Z M8.5,9 C7.5,9 6.75,9.75 6.75,10.75 L7,12 7.25,13.25 6.5,15.5 7,19 H8 V18.5 L7.5,18.25 7.75,15.75 9.75,12.25 10.25,10.75 C10.25,9.75 9.5,9 8.5,9 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 3" d="M22,8.25 20.75,7.5 20.25,6.5 19,6 V5 L18.25,6 16,7.75 17.75,10.75 19,8.75 H20 L21.25,9 Z" :fill="fillColor" fill-rule="evenodd"/>
    </g>
    <g v-else-if="iconSet == 2" stroke="none" :fill="fillColor" >
      <path d="M22,9.5 20.5,8.5 19.75,7.25 18.25,6.75 V 5 L 17,6.75 15,8.25 12,9.5 H 5.75 L 2.75,10 2,12 2.5,15.75 3.25,16 4,19 H 5.5 V 18.25 L 5,18 5.25,16.25 6,15.25 H 10 L 13.75,16 14.75,19 H 16.25 V 18.25 L 15.75,18 V 16 L 17,15.25 17.5,12 18.25,10.25 H 19.5 L 21,10.5 Z" style="opacity: .4;"/>
      <path v-if="region == 0" d="M12,9.5 H 11 L 10,15.25 13.75,16 H 15.75 L 17,15.25 17.5,12 Z" fill-rule="evenodd" :fill="fillColor" />
      <path v-else-if="region ==1" d="M 11,9.5 H 5.75 L 2.75,10 2,12 2.5,15.75 3.25,16 6,15.25 H 10 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 2" d="M11.25,10.25 C 10.25,11.25 10.25,12.75 11.25,13.75 L 13.75,16 14.75,19 H 16.25 V 18.25 L 15.75,18 V 16 L 16,12 14.75,10.25 C 13.75,9.25 12.25,9.25 11.25,10.25 Z M 3,11 2,12 2.5,15.75 3.25,16 4,19 H 5.5 V 18.25 L 5,18 5.25,16.25 6,15.25 6.5,14.5 C 7.5,13.5 7.5,12 6.5,11 C 5.5,10 4,10 3,11 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 3" d="M 22,9.5 20.5,8.5 19.75,7.25 18.25,6.75 V 5 L 17,6.75 15,8.25 12,9.5 17.5,12 18.25,10.25 H 19.5 L 21,10.5 Z" :fill="fillColor" fill-rule="evenodd"/>
    </g>
    <g v-else-if="iconSet == 3" stroke="none" :fill="fillColor" >
      <path d="M22,6.25 L21,6 V5 L19.5,4.5 V3 L18.25,4.5 16,6.5 12.5,8 6,8.25 4,8.5 2.5,9.75 2,10.5 2.75,10.75 3.5,10.25 V11 L4,12.5 4.25,14 3.25,16.5 4,21 H5.25 V20.25 L4.75,20 5,16.75 7.75,13 10.5,14.5 15,15.25 15.25,18.75 16,21 H17.25 V20.25 L16.75,20 V16.5 L17.75,13.75 18.5,10.5 19.5,8.25 H20.5 L21.5,8.75 22,7.75 Z" style="opacity: .4;"/>
      <path v-if="region == 0" d="M16,6.5 L12.5,8 10.5,14.5 15,15.25 17.75,13.75 18.5,10.5 Z" fill-rule="evenodd" :fill="fillColor" />
      <path v-else-if="region ==1" d="M12.5,8 L6,8.25 4,8.5 2.5,9.75 2,10.5 2.75,10.75 3.5,10.25 V11 L4,12.5 7.75,13 10.5,14.5 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 2" d="M12.75,8.25 C11.75,9.25 11.75,10.75 12.75,11.75 L15,15.25 15.25,18.75 16,21 H17.25 V20.25 L16.75,20 V16.5 L17.75,13.75 18.5,10.5 16.25,8.25 C15.25,7.25 13.75,7.25 12.75,8.25 Z M6,8.5 C4.75,8.5 3.5,9.75 3.5,11 L4,12.5 4.25,14 3.25,16.5 4,21 H5.25 V20.25 L4.75,20 5,16.75 7.75,13 8.5,11 C8.5,9.75 7.25,8.5 6,8.5 Z" :fill="fillColor" fill-rule="evenodd"/>
      <path v-else-if="region == 3" d="M22,6.25 L21,6 V5 L19.5,4.5 V3 L18.25,4.5 L16,6.5 18.5,10.5 19.5,8.25 H20.5 L21.5,8.75 22,7.75 Z" :fill="fillColor" fill-rule="evenodd"/>
    </g>
  </svg>
</template>

<script>
  export default {
    name: "RegionIcon",
    props: {
      region: {
        type: Number,
        validator(value) {
          return value >= 0 && value <= 3
        }
      },
      fillColor: {
        type: String,
        default: "var(--avn-theme-color)"
      },
      iconSet: {
        type: Number,
        default: 1,
        validator(value) {
          return value >= 1 && value <= 3
        }
      }
    }
  }
</script>