<script setup lang="ts">
import type { ColorObject, TrackingObject } from '#layers/types/api/common'

interface Props {
  backgroundColor: ColorObject
}

const props = defineProps<Props>()

const { locale } = useI18n()
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
const { sendLog } = useAnalytics()

const analytics = {
  action_type: 'click',
  click_item: 'TOP버튼',
  click_sarea: 'TOP',
} as TrackingObject

const showBtn = computed(() => windowY.value > 0)
const backgroundColor = computed(
  () => getColorCodeFromData(props.backgroundColor, 'none') ?? 'var(--primary)'
)

const handleScrollToTop = () => {
  windowY.value = 0
  sendLog(locale.value, analytics)
}
</script>

<template>
  <Transition name="fade">
    <AtomsButtonCircle
      v-show="showBtn"
      :background-color="backgroundColor"
      sr-only="top"
      class="btn-top"
      @click="handleScrollToTop"
    >
      <AtomsIconsArrowControlTopLine />
    </AtomsButtonCircle>
  </Transition>
</template>

<style scoped>
.btn-top:hover :deep(.icon) {
  @apply -translate-y-[3px];
}
.btn-top:hover :deep(.icon svg) {
  fill-opacity: 1;
}
</style>
