import { defineStore } from "pinia";
import axios from "axios";
import { useRoute } from "vue-router";
import { computed, ref, onMounted } from "vue";

const useHeatmapBarStore = defineStore("heatmap", () => {
  const route = useRoute();

  const allHeatMaps = ref({});
  const heatmapConfig = computed(() => allHeatMaps.value[route.query?.gas]);

  const getConfig = async () => {
    const res = await axios.get("/config.json");
    console.log(res);
    allHeatMaps.value = res.data.heatmap;
  };

  onMounted(() => {
    getConfig();
  });

  const heat_bar_isShow = computed(() => Boolean(heatmapConfig.value));

  return { heatmapConfig, heat_bar_isShow };
});

export default useHeatmapBarStore;