<script lang="ts" setup>
import type { BacktopProps } from './backtop';

import { computed } from 'vue';

import { ArrowDownToLine, ArrowUpToLine } from '@easyflow-core/icons';

import { EasyFlowButton } from '../button';
import { useBackTop } from './use-backtop';

interface Props extends BacktopProps {}

defineOptions({ name: 'BackTop' });

const props = withDefaults(defineProps<Props>(), {
  bottom: 20,
  bottomLabel: 'Scroll to bottom',
  isGroup: false,
  right: 24,
  target: '',
  topLabel: 'Back to top',
  visibilityHeight: 200,
});

const backTopStyle = computed(() => ({
  bottom: `${props.bottom}px`,
  right: `${props.right}px`,
}));

const {
  canScrollDown,
  canScrollUp,
  handleBottomClick,
  handleClick,
  scrollable,
  visible,
} = useBackTop(props);
</script>
<template>
  <transition name="fade-down">
    <div
      v-if="isGroup ? scrollable : visible"
      :style="backTopStyle"
      class="z-popup fixed flex flex-col gap-2"
    >
      <EasyFlowButton
        :aria-label="topLabel"
        :disabled="isGroup && !canScrollUp"
        :title="topLabel"
        class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy shadow-float size-10 rounded-full duration-150"
        size="icon"
        variant="icon"
        @click="handleClick"
      >
        <ArrowUpToLine class="size-4" />
      </EasyFlowButton>
      <EasyFlowButton
        v-if="isGroup"
        :aria-label="bottomLabel"
        :disabled="!canScrollDown"
        :title="bottomLabel"
        class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy shadow-float size-10 rounded-full duration-150"
        size="icon"
        variant="icon"
        @click="handleBottomClick"
      >
        <ArrowDownToLine class="size-4" />
      </EasyFlowButton>
    </div>
  </transition>
</template>
