<template>
  <div class="box">
    <div class="table-container">
      <table class="table is-bordered is-fullwidth is-hoverable">
        <thead>
          <tr>
            <th>List Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="loading">
            <tr
              v-for="index in 5"
              :key="index"
            >
              <td>
                <div
                  class="skeleton-loader"
                  style="width: 150px; height: 20px"
                ></div>
              </td>
              <td>
                <div
                  class="skeleton-loader"
                  style="width: 250px; height: 20px"
                ></div>
              </td>
            </tr>
          </template>
          <template v-else-if="dataEmail.length === 0">
            <tr>
              <td
                colspan="2"
                class="has-text-centered py-6"
              >
                <div class="has-text-grey">
                  <p class="has-text-weight-medium">No saved lists found</p>
                  <p class="is-size-7 mt-2">Create a new list to get started</p>
                </div>
              </td>
            </tr>
          </template>
          <template v-else>
            <tr
              v-for="item in dataEmail"
              :key="item.id"
              :class="['is-clickable', selectedEmails === item.email ? 'is-selected' : '']"
              @click="handleRowClick(item.email, item.name, item.id)"
            >
              <td class="has-text-weight-medium">{{ item.name }}</td>
              <td class="has-text-grey-dark">{{ item.email }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useNuxtApp } from "nuxt/app";

interface EmailItem {
  id: string;
  name: string;
  email: string;
}

interface Props {
  dataEmail: EmailItem[];
  onClose: () => void;
  loading?: boolean;
}

const emit = defineEmits<{
  modalevent: [{ name: string; data: { email: string; name: string; id: string } }];
  close: [];
  success: [];
}>();

const props = withDefaults(defineProps<Props>(), {
  loading: false,
});

console.log(props.dataEmail);

const nuxtApp = useNuxtApp();
const $snackbar = nuxtApp.$snackbar as (message?: string) => void;

const selectedEmails = ref<string>("");
const selectedName = ref<string>("");
const selectedId = ref<string>("");

const handleRowClick = (email: string, name: string, id: string) => {
  selectedEmails.value = email;
  selectedName.value = name;
  selectedId.value = id;

  $snackbar(`Đã chọn danh sách: ${name}`);

  // Emit event to parent through Modal
  emit("modalevent", {
    name: "dataevent",
    data: { email, name, id },
  });

  emit("close");
  emit("success");
};
</script>

<style scoped>
.is-clickable {
  cursor: pointer;
}

.is-clickable:hover {
  background-color: hsl(219, 70%, 96%) !important;
}

.is-selected {
  background-color: hsl(219, 70%, 90%) !important;
}

.skeleton-loader {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 2s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
