<script setup>
const {
  isProcessing,
  isShowCheckLauncher,
  isShowDownloadLauncher,
  validateLauncher,
  downloadLauncher,
} = useCheckGameStart()
</script>

<template>
  <AtomsButton
    :class="$attrs?.class"
    :disabled="isProcessing"
    @click="validateLauncher"
  >
    <slot />
  </AtomsButton>

  <ClientOnly>
    <Teleport to="#teleports">
      <BlocksModalLayer
        v-model:is-open="isShowCheckLauncher"
        :is-show-dimmed="true"
        :is-outside-close="false"
        :modal-name="'launcher'"
        area-class="max-w-[480px] pt-[56px] px-[24px] pb-[24px] rounded-[8px]"
        close-class="absolute top-[16px] right-[24px]"
      >
        <span class="ico-loading"></span>
        <!-- [TODO] i18n 적용 -->
        <!-- <p class="text-check">{{ tm('Common_Message_Check_Client').txt }}</p> -->
        <p class="text-check">pc 클라이언트 실행 중...</p>
        <Transition name="fade">
          <div v-if="isShowDownloadLauncher" class="client-area">
            <!-- <p
              v-dompurify-html="tm('Common_Message_Download_Client').txt"
              class="text-info"
            ></p>
            <button type="button" class="btn-download" @click="downloadLauncher">
              {{ tm('Common_Message_Install').txt }}
            </button>
            <p
              v-dompurify-html="tm('Common_Message_Download_Close').txt"
              class="text-tip"
            ></p> -->
            <p class="text-info">
              PC 클라이언트가 실행되지 않나요?
              <br />
              다운로드 전이라면 다운로드 후 진행해주세요
            </p>
            <AtomsButtonVariant class="max-w-[300px]" @click="downloadLauncher">
              다운로드
            </AtomsButtonVariant>
            <p
              v-dompurify-html="
                '*PC 클라이언트가 정상 실행되었다면 팝업을 닫아 주세요.'
              "
              class="text-tip"
            ></p>
          </div>
        </Transition>
      </BlocksModalLayer>
    </Teleport>
  </ClientOnly>
</template>

<style scoped>
.ico-loading {
  @apply block mx-auto mb-4 w-[80px] h-[80px] bg-[url('/images/common/stove_loading_light.png')] bg-contain bg-center bg-no-repeat;
}
.text-check {
  @apply mb-6 text-center text-[20px] font-bold leading-[30px] tracking-[-0.6px] text-[#333333];
}

.client-area {
  @apply pt-4 border-t border-[rgba(0,0,0,0.08)] text-center;
}
.text-info {
  @apply mb-3 text-[14px] font-medium leading-[24px] tracking-[-0.42px] text-[#333333];
}
.text-tip {
  @apply mt-4 text-[14px] leading-[20px] tracking-[-0.42px] text-[#999999];
}
</style>
