<template>
  <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
  <CloudArrowUpIcon
    v-else-if="syncing == 'detectedChanges'"
    class="w-5 h-5 cursor-pointer animate-bounce"
    @click="syncAll"
  />
  <ArrowPathIcon v-else-if="syncing == 'syncing'" class="w-5 h-5 animate-spin" />
  <ExclamationTriangleIcon
    v-else
    class="w-5 h-5 animate-[ping_1s_ease-in-out_3] text-red-500 cursor-pointer"
    @click="syncAll"
  />
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNewsletterStore } from "@/stores/admin/newsletter";
import { ArrowPathIcon, CloudArrowUpIcon, CloudIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
import { useNewsletterDatesStore } from "@/stores/admin/newsletterDates";
import { useNewsletterRecipientsStore } from "@/stores/admin/newsletterRecipients";
</script>

<script lang="ts">
export default defineComponent({
  props: ["executeSyncAll"],
  watch: {
    executeSyncAll() {
      this.syncAll();
    },
    syncing() {
      this.$emit("syncState", this.syncing);
    },
    detectedChangeNewsletter() {
      clearTimeout(this.newsletterTimer);
      this.setNewsletterSyncingState("synced");
      if (this.detectedChangeNewsletter == false) {
        return;
      }
      this.setNewsletterSyncingState("detectedChanges");
      this.newsletterTimer = setTimeout(() => {
        this.synchronizeActiveNewsletter();
      }, 10000);
    },
    detectedChangeNewsletterDates() {
      clearTimeout(this.newsletterDatesTimer);
      if (this.detectedChangeNewsletterDates == false) {
        this.setNewsletterDatesSyncingState("synced");
        return;
      }
      this.setNewsletterDatesSyncingState("detectedChanges");
      this.newsletterDatesTimer = setTimeout(() => {
        this.synchronizeActiveNewsletterDates();
      }, 10000);
    },
    detectedChangeNewsletterRecipients() {
      clearTimeout(this.newsletterRecipientsTimer);
      this.setNewsletterRecipientsSyncingState("synced");
      if (this.detectedChangeNewsletterRecipients == false) {
        return;
      }
      this.setNewsletterRecipientsSyncingState("detectedChanges");
      this.newsletterRecipientsTimer = setTimeout(() => {
        this.synchronizeActiveNewsletterRecipients();
      }, 10000);
    },
  },
  emits: {
    syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
      return typeof state == "string";
    },
  },
  data() {
    return {
      newsletterTimer: undefined as undefined | any,
      newsletterDatesTimer: undefined as undefined | any,
      newsletterRecipientsTimer: undefined as undefined | any,
    };
  },
  mounted() {
    this.$emit("syncState", this.syncing);
  },
  beforeUnmount() {
    if (!this.newsletterTimer) clearTimeout(this.newsletterTimer);
    if (!this.newsletterDatesTimer) clearTimeout(this.newsletterDatesTimer);
    if (!this.newsletterRecipientsTimer) clearTimeout(this.newsletterRecipientsTimer);
  },
  computed: {
    ...mapState(useNewsletterStore, ["syncingNewsletter", "detectedChangeNewsletter"]),
    ...mapState(useNewsletterDatesStore, ["syncingNewsletterDates", "detectedChangeNewsletterDates"]),
    ...mapState(useNewsletterRecipientsStore, ["syncingNewsletterRecipients", "detectedChangeNewsletterRecipients"]),

    syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
      let states = [
        this.syncingNewsletter,
        this.syncingNewsletterDates,
        this.syncingNewsletterRecipients,
      ];

      if (states.includes("failed")) return "failed";
      else if (states.includes("syncing")) return "syncing";
      else if (states.includes("detectedChanges")) return "detectedChanges";
      else return "synced";
    },
  },
  methods: {
    ...mapActions(useNewsletterStore, ["synchronizeActiveNewsletter", "setNewsletterSyncingState"]),
    ...mapActions(useNewsletterDatesStore, ["synchronizeActiveNewsletterDates", "setNewsletterDatesSyncingState"]),
    ...mapActions(useNewsletterRecipientsStore, ["synchronizeActiveNewsletterRecipients", "setNewsletterRecipientsSyncingState"]),

    syncAll() {
      if (!this.newsletterTimer) clearTimeout(this.newsletterTimer);
      if (!this.newsletterDatesTimer) clearTimeout(this.newsletterDatesTimer);
      if (!this.newsletterRecipientsTimer) clearTimeout(this.newsletterRecipientsTimer);

      this.synchronizeActiveNewsletter();
      this.synchronizeActiveNewsletterDates();
      this.synchronizeActiveNewsletterRecipients();
    },
  },
});
</script>
