import { ref, watch } from "vue"

import timer from "@/module/ose-card/service/timer"

export function useOseCardDynamicPreview({ data, store }) {
  const dynamicPhoneVisible = ref(false)
  const dynamicComputerVisible = ref(false)

  const initializeDynamicCard = (cardContainerClassName, miniCardContainerClassName, isPhone) => {
    if (store.state.ose_card_store.timer_id) {
      clearInterval(store.state.ose_card_store.timer_id)
    }

    timer.initTimer(new Date(data.start_date).getTime(), new Date(data.end_date).getTime(), true)

    const dynamicPhoneContainer = document.querySelector(".dynamic_phone_container")
    const dynamicComputerContainer = document.querySelector(".dynamic_computer_container")
    const dynamicCardContainer = document.querySelector(`.${cardContainerClassName}`)
    const miniDynamicCardContainer = document.querySelector(`.${miniCardContainerClassName}`)

    if (isPhone) {
      dynamicCardContainer.style.display = "none"
      miniDynamicCardContainer.style.display = "none"
    } else {
      dynamicCardContainer.style.display = ""
      miniDynamicCardContainer.style.display = "none"
    }

    data.dynamic_phone_container = dynamicPhoneContainer.outerHTML
    data.dynamic_computer_container = dynamicComputerContainer.outerHTML
    dynamicCardContainer.style.display = ""
    miniDynamicCardContainer.style.display = "none"
  }

  const bindDynamicCardControl = (cardContainerClassName, miniCardContainerClassName) => {
    const dynamicCardContainer = document.querySelector(`.${cardContainerClassName}`)
    const miniDynamicCardContainer = document.querySelector(`.${miniCardContainerClassName}`)
    const closeButton = dynamicCardContainer?.querySelector(".ose-close-card-btn")

    closeButton?.addEventListener("click", () => {
      dynamicCardContainer.style.display = "none"
      miniDynamicCardContainer.style.display = ""
    })

    miniDynamicCardContainer?.addEventListener("click", () => {
      dynamicCardContainer.style.display = ""
      miniDynamicCardContainer.style.display = "none"
    })
  }

  const prepareDynamicPreviewForSave = () => {
    initializeDynamicCard("dynamic_computer_card_container", "mini_dynamic_computer_card_container")
    initializeDynamicCard("dynamic_phone_card_container", "mini_dynamic_phone_card_container", true)
  }

  watch(() => dynamicComputerVisible.value, () => {
    bindDynamicCardControl("dynamic_computer_card_container", "mini_dynamic_computer_card_container")
  })

  watch(() => dynamicPhoneVisible.value, () => {
    bindDynamicCardControl("dynamic_phone_card_container", "mini_dynamic_phone_card_container")
  })

  watch(
    () => [data.start_date, data.end_date, data.carousel_days],
    () => {
      if (data.start_date && data.end_date) {
        if (store.state.ose_card_store.timer_id) {
          clearInterval(store.state.ose_card_store.timer_id)
        }

        store.state.ose_card_store.timer_id = timer.initTimer(
          new Date(data.start_date).getTime(),
          new Date(data.end_date).getTime(),
          null,
          data.carousel_days
        )
      }
    }
  )

  watch(
    () => data.landing_page,
    () => {
      try {
        data.origin = new URL(data.landing_page).origin
      } catch (error) {
        // Ignore malformed URLs while the user is still typing.
      }
    }
  )

  return {
    dynamicPhoneVisible,
    dynamicComputerVisible,
    prepareDynamicPreviewForSave,
  }
}
