<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">Activity list</p>
    <div
      class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
      id="cyp-conformance-list-checkbox"
    >
      <div
        class="flex items-center w-[166px]"
        v-for="(act, index) in sortData"
        :key="index"
        :title="act"
      >
        <Checkbox
          v-model="actList"
          :inputId="index.toString()"
          name="actList"
          :value="act"
          @change="actListData"
        />
        <label
          :for="index"
          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
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ActList
 *   Checkbox-based activity list for conformance checking input.
 */

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

const props = defineProps(["data", "select"]);

const sortData = ref([]);
const actList = ref(props.select);

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

watch(
  () => props.select,
  (newValue) => {
    actList.value = newValue;
  },
);

/** Emits the selected activities list via the event bus. */
function actListData() {
  emitter.emit("actListData", actList.value);
}

// created
emitter.on("reset", (data) => {
  actList.value = data;
});

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