<template>
  <g
    ref="chart_ref"
    :class="[classObject]"
    :data-regional="item.regional"
    @click="clickAction"
  >
    <path :d="item.svgData" />
    <text
      :transform="item.textData"
      class="item text-weight-medium"
      style="font-size: 10px"
      fill="white"
    >
      {{ item.pessoas || 0 }}
    </text>
    <circle
      v-if="showCircleInfo"
      :cy="item.circleData.cy"
      :cx="item.circleData.cx"
      r="10"
      :class="[counterClassObject]"
    />
  </g>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({
      altText: "--",
    }),
  },
  showCircleInfo: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["stateSelectedEvent", "stateMouseOverEvent"]);

const active = ref(false);
const counterActive = ref(false);
const altText = ref(props.item.altText || "-");
const chart_ref = ref(null);

const classObject = computed(() => {
  return active.value ? ["mapa-svg-estados-active"] : ["mapa-svg-estados"];
});

const counterClassObject = computed(() => {
  return counterActive.value ? ["sphere active"] : ["sphere"];
});

// const pad = (value) => {
//   if (!value) return "";
//   return ("000000000" + value).slice(-2);
// };

const clickAction = () => {
  // console.log("mapa-estado: clickAction()");
  emit("stateSelectedEvent", {
    src: {
      item: props.item,
    },
    enable,
  });
};
const resetAction = () => {
  disable();
};
const disable = () => {
  // console.log("mapa-estado: disabled ", props.item.uf);
  active.value = false;
  hideCounter();
};

const enable = () => {
  // console.log("mapa-estado: enable ");
  active.value = true;
  showCounter();
};
const setAltText = (val) => {
  altText.value = val;
};
const hideCounter = () => {
  counterActive.value = false;
};
const showCounter = () => {
  counterActive.value = true;
};

onMounted(() => {
  altText.value = props.item.altText;
});

defineExpose({
  resetAction,
  setAltText,
});
</script>

<style>
.item {
  fill: rgb(240, 221, 221);
}
</style>
