<script setup lang="ts">
import {
  ArrowLeft,
  ArrowRight,
  Loading,
} from '@element-plus/icons-vue';

const props = withDefaults(
  defineProps<{
    current?: number;
    disabled?: boolean;
    disabledNext?: boolean;
    disabledPrev?: boolean;
    loading?: boolean;
    total?: number;
  }>(),
  {
    current: 1,
    disabled: false,
    disabledNext: false,
    disabledPrev: false,
    loading: false,
    total: 1,
  },
);

const emit = defineEmits<{
  next: [];
  previous: [];
}>();

function handlePrevious() {
  if (props.disabled || props.disabledPrev || props.loading) {
    return;
  }
  emit('previous');
}

function handleNext() {
  if (props.disabled || props.disabledNext || props.loading) {
    return;
  }
  emit('next');
}
</script>

<template>
  <div
    v-if="total > 1"
    class="variant-nav"
    :class="{ 'is-loading': loading }"
  >
    <button
      type="button"
      class="variant-nav__button"
      :disabled="disabled || disabledPrev || loading"
      aria-label="查看上一版答案"
      title="上一版"
      @click="handlePrevious"
    >
      <Loading v-if="loading" />
      <ArrowLeft v-else />
    </button>

    <span class="variant-nav__label">{{ current }}/{{ total }}</span>

    <button
      type="button"
      class="variant-nav__button"
      :disabled="disabled || disabledNext || loading"
      aria-label="查看下一版答案"
      title="下一版"
      @click="handleNext"
    >
      <Loading v-if="loading" />
      <ArrowRight v-else />
    </button>
  </div>
</template>

<style scoped>
.variant-nav {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.variant-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: hsl(var(--text-muted));
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: transparent;
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.variant-nav__button:hover:not(:disabled) {
  color: hsl(var(--text-strong));
  background: hsl(var(--foreground) / 0.05);
}

.variant-nav__button:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.32);
  outline-offset: 2px;
}

.variant-nav__button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.variant-nav__button :deep(svg) {
  width: 14px;
  height: 14px;
}

.variant-nav.is-loading .variant-nav__button :deep(svg) {
  animation: variant-nav-spin 0.8s linear infinite;
}

.variant-nav__label {
  min-width: 44px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: hsl(var(--text-muted));
}

@keyframes variant-nav-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
