import { defineStore, skipHydrate } from 'pinia'
import type {
  DialogParams,
  YoutubeParams,
} from '#layers/types/components/modal'

const createModalState = () => ({
  storeIsOpen: ref(false),
  storeIsShowDimmed: ref(false),
  storeModalName: ref(''),
  storeIsOutsideClose: ref(false),
  storeContentText: ref(''),
  storeConfirmButtonText: ref(''),
  storeConfirmButtonEvent: skipHydrate(ref<() => void>(undefined)),
})

export const useModalStore = defineStore('modalStore', () => {
  const scrollStore = useScrollStore()

  // alert ------------------
  const alert = {
    ...createModalState(),
  }

  const handleOpenAlert = ({
    isShowDimmed = true,
    modalName = '',
    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
    confirmButtonEvent = undefined,
  }: DialogParams) => {
    alert.storeIsOpen.value = true
    alert.storeIsShowDimmed.value = isShowDimmed
    alert.storeModalName.value = modalName
    alert.storeContentText.value = contentText
    alert.storeConfirmButtonText.value = confirmButtonText
    alert.storeIsOutsideClose.value = isOutsideClose
    alert.storeConfirmButtonEvent.value = confirmButtonEvent
  }

  // confirm ------------------
  const confirm = {
    ...createModalState(),
    storeCancelButtonText: ref(''),
    storeCancelButtonEvent: skipHydrate(ref<() => void>(undefined)),
  }

  const handleOpenConfirm = ({
    isShowDimmed = true,
    modalName = '',
    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
    cancelButtonText = '',
    confirmButtonEvent = undefined,
    cancelButtonEvent = undefined,
  }: DialogParams) => {
    confirm.storeIsOpen.value = true
    confirm.storeIsShowDimmed.value = isShowDimmed
    confirm.storeModalName.value = modalName
    confirm.storeContentText.value = contentText
    confirm.storeConfirmButtonText.value = confirmButtonText
    confirm.storeCancelButtonText.value = cancelButtonText
    confirm.storeIsOutsideClose.value = isOutsideClose
    confirm.storeConfirmButtonEvent.value = confirmButtonEvent
    confirm.storeCancelButtonEvent.value = cancelButtonEvent
  }

  // youtube ------------------
  const youtube = {
    storeIsOpen: ref(false),
    storeYoutubeUrl: ref(''),
    storeIsOutsideClose: ref(false),
    storeModalName: ref(''),
  }

  const handleOpenYoutube = ({
    youtubeUrl,
    isOutsideClose = false,
    modalName = '',
  }: YoutubeParams) => {
    youtube.storeIsOpen.value = true
    youtube.storeYoutubeUrl.value = youtubeUrl
    youtube.storeIsOutsideClose.value = isOutsideClose
    youtube.storeModalName.value = modalName
    scrollStore.controlScrollLock(true)
  }

  const handleResetYoutube = () => {
    youtube.storeIsOpen.value = false
    youtube.storeYoutubeUrl.value = ''
    youtube.storeIsOutsideClose.value = false
    youtube.storeModalName.value = ''
    scrollStore.controlScrollLock(false)
  }

  // toast ------------------
  const toast = {
    storeIsOpen: ref(false),
    storeContentText: ref(''),
  }

  const handleOpenToast = (contentText: string, duration: number = 2000) => {
    toast.storeIsOpen.value = true
    toast.storeContentText.value = contentText

    setTimeout(() => {
      toast.storeIsOpen.value = false
      toast.storeContentText.value = ''
    }, duration)
  }

  return {
    alert,
    confirm,
    youtube,
    toast,
    handleOpenAlert,
    handleOpenConfirm,
    handleOpenYoutube,
    handleResetYoutube,
    handleOpenToast,
  }
})