<script setup lang="ts">
import {ChevronLeft, ChevronRight, LoaderCircle} from '@easyflow/icons';

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

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

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

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

<template>
  <div v-if="total > 1" class="chat-variant-navigator">
    <button
      type="button"
      class="chat-variant-navigator__button"
      :disabled="disabledPrevious || loading"
      aria-label="上一版答案"
      title="上一版"
      @click="handlePrevious"
    >
      <LoaderCircle v-if="loading" />
      <ChevronLeft v-else />
    </button>
    <span class="chat-variant-navigator__label">{{ current }}/{{ total }}</span>
    <button
      type="button"
      class="chat-variant-navigator__button"
      :disabled="disabledNext || loading"
      aria-label="下一版答案"
      title="下一版"
      @click="handleNext"
    >
      <LoaderCircle v-if="loading" />
      <ChevronRight v-else />
    </button>
  </div>
</template>

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

.chat-variant-navigator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    opacity 0.18s ease;
}

.chat-variant-navigator__button:hover:not(:disabled) {
  color: var(--el-text-color-primary);
  background: var(--el-fill-color-light);
}

.chat-variant-navigator__button:focus-visible {
  outline: 2px solid var(--el-color-primary-light-5);
  outline-offset: 2px;
}

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

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

.chat-variant-navigator__button :deep(.lucide-loader-circle) {
  animation: chat-variant-spin 0.8s linear infinite;
}

.chat-variant-navigator__label {
  min-width: 36px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--el-text-color-secondary);
  text-align: center;
}

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

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