<template>
  <div
    class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
  >
    <p class="h2 pl-2 border-b mb-3">{{ title }}</p>
    <div
      class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
    >
      <div
        class="flex items-center w-[166px]"
        v-for="(act, index) in sortData"
        :key="index"
        :title="act"
      >
        <RadioButton
          v-model="selectedRadio"
          :inputId="index + act"
          :name="select"
          :value="act"
          @change="actRadioData"
        />
        <label
          :for="index + act"
          class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
          >{{ act }}</label
        >
      </div>
    </div>
  </div>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ActRadio
 *   Radio-button activity selector for conformance checking
 *   start/end activity input.
 */

import { ref, computed, watch, onBeforeUnmount } from "vue";
import { useConformanceInputStore } from "@/stores/conformanceInput";
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
import emitter from "@/utils/emitter";

const props = defineProps([
  "title",
  "select",
  "data",
  "category",
  "task",
  "isSubmit",
]);
const emit = defineEmits(["selected-task"]);

const conformanceInputStore = useConformanceInputStore();

const sortData = ref([]);
const localSelect = ref(null);
const selectedRadio = ref(null);

watch(
  () => props.data,
  (newValue) => {
    sortData.value = sortNumEngZhtw(newValue);
  },
  { immediate: true },
);

watch(
  () => props.task,
  (newValue) => {
    selectedRadio.value = newValue;
  },
);

const inputActivityRadioData = computed(() => ({
  category: props.category,
  task: selectedRadio.value,
}));

/** Emits the selected activity via event bus and updates the store. */
function actRadioData() {
  localSelect.value = null;
  emitter.emit("actRadioData", inputActivityRadioData.value);
  emit("selected-task", selectedRadio.value);
  conformanceInputStore.setActivityRadioStartEndData(
    inputActivityRadioData.value.task,
  );
}

/** Sets the global activity radio data state in the conformance input store. */
function setGlobalActivityRadioDataState() {
  //this.title: value might be "From" or "To"
  conformanceInputStore.setActivityRadioStartEndData(
    inputActivityRadioData.value.task,
    props.title,
  );
}

// created
sortNumEngZhtw(sortData.value);
localSelect.value = props.isSubmit ? props.select : null;
selectedRadio.value = localSelect.value;
emitter.on("reset", (data) => {
  selectedRadio.value = data;
});
setGlobalActivityRadioDataState();

onBeforeUnmount(() => {
  emitter.off("reset");
});
</script>
