<script setup>
import { ref, computed, inject, watch } from "vue";
import { useI18n } from "vue-i18n";
import { toggleDevicePower } from "@/apis/system";
import dayjs from "dayjs";
const { openToast } = inject("app_toast");
const { t } = useI18n();
const { selectedDevice, selectedDeviceRealtime } = inject(
  "system_selectedDevice"
);

const groupedData = computed(() => {
  const grouped = {};

  if (selectedDeviceRealtime?.value) {
    selectedDeviceRealtime.value.forEach((record) => {
      const { ori_device_number, time, topic_publish } = record;

      if (!grouped[ori_device_number]) {
        grouped[ori_device_number] = {
          time,
          data: [],
        };
      }

      selectedDevice.value.value.points.forEach((d) => {
        if (record.point === d.points) {
          grouped[ori_device_number].data.push({
            ...d,
            device_item_id: record.device_item_id,
            topic_publish: record.topic_publish,
            value: record.value,
          });
        }
      });
    });
  }

  return grouped;
});

const togglePowerSwitch = async (e, device_item_id, topic_publish) => {
  const isChecked = e.target.checked;
  const res = await toggleDevicePower({
    device_item_id,
    topic_publish,
    new_value: isChecked,
  });

  if (res.isSuccess) {
    openToast("success", t("msg.edit_successfully"), "#system_info_modal");
  } else {
    openToast("error", res.msg, "#system_info_modal");
  }
};
</script>

<template>
  <div v-if="selectedDeviceRealtime">
    <div v-for="(group, oriDeviceNumber) in groupedData" :key="oriDeviceNumber">
      <p class="mt-5 text-info">
        {{ $t("operation.updated_time") }} : {{ group.time }}
      </p>
      <table class="table mt-2">
        <thead>
          <tr>
            <th
              class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
            >
              {{ $t("system.attribute") }}
            </th>
            <th
              class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
            >
              {{ $t("system.value") }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(items, index) in group.data" :key="index">
            <td class="border text-white text-lg text-center">
              {{ items.full_name }}
            </td>
            <td class="border text-white text-lg text-center">
              <template v-if="items.full_name === 'Power Switch'">
                <input
                  type="checkbox"
                  class="toggle toggle-success"
                  :checked="items.value"
                  @change="
                    togglePowerSwitch($event, items.device_item_id, items.topic_publish)
                  "
                />
              </template>
              <template v-else>
                {{ items.value }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <p class="text-2xl text-center my-6" v-else>{{ $t("table.no_data") }}</p>
</template>

<style lang="scss" scoped></style>
