<script setup lang="ts">
const showSnsList = ref(false)

const { tm } = useI18n()
const gameDataStore = useGameDataStore()
const modalStore = useModalStore()

const { gameData } = storeToRefs(gameDataStore)
const { handleOpenToast } = modalStore

const snsBackgroundColor = computed(() => {
  const colorData = gameData.value?.comm_sns_bg_color_json?.display
  const colorCode = getColorCode({
    colorName: colorData?.color_name,
    colorCode: colorData?.color_code,
  })
  return colorCode
})
const snsList = computed(() => {
  return gameData.value?.sns_json
})

const handleMouseEnter = () => {
  showSnsList.value = true
}

const handleForceClose = () => {
  showSnsList.value = false
}

const handleCopy = async () => {
  if (!import.meta.client) return

  try {
    const url = window.location.href
    await navigator.clipboard.writeText(url)
    handleOpenToast(tm('Alert_Copy_Complete'))
  } catch (error) {
    console.error('[handleCopy] Error:', error)
  }
}
</script>

<template>
  <div v-if="Object.keys(snsList).length > 0" class="sns-container">
    <AtomsButtonCircle
      class="btn-sns"
      sr-only="sns"
      :style="{ backgroundColor: snsBackgroundColor }"
      @click="handleMouseEnter"
    >
      <AtomsIconsShareLine class="icon-share" />
    </AtomsButtonCircle>
    <transition name="fade">
      <div
        v-if="showSnsList"
        class="sns-list"
        :style="{ backgroundColor: snsBackgroundColor }"
      >
        <template v-for="(item, key) in snsList" :key="key">
          <a
            v-if="item?.url"
            :href="item?.url"
            target="_blank"
            class="sns-item"
            :style="{
              backgroundImage: `url(${getImageHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
            }"
          >
            <span class="sr-only">{{ key }}</span>
          </a>
        </template>
        <button
          type="button"
          class="sns-item"
          :style="{
            backgroundImage: `url(${getImageHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
          }"
          @click="handleCopy"
        >
          <span class="sr-only">copy</span>
        </button>
        <div class="close-container">
          <button
            type="button"
            class="opacity-50 z-[1] hover:opacity-100"
            @click="handleForceClose"
          >
            <span class="sr-only">close</span>
            <AtomsIconsCloseLine size="24" />
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.btn-sns:hover .icon-share {
  @apply fill-white;
}

.sns-list {
  @apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full
  h-[40px] md:h-[48px] pl-4 pr-3
  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
}
.sns-item {
  @apply w-[24px] h-[24px] bg-center bg-cover bg-no-repeat opacity-50 z-[1]
  hover:opacity-100;
}
.sns-item:hover {
  @apply opacity-100;
}

.close-container {
  @apply relative flex pl-4
  before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-[1px] before:h-[20px] before:bg-[rgba(255,255,255,0.1)] before:translate-y-[-50%];
}
</style>
