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

import ChatAnswerVariantNavigator from './ChatAnswerVariantNavigator.vue';

const props = withDefaults(
  defineProps<{
    align?: 'end' | 'start';
    allowCopy?: boolean;
    allowRegenerate?: boolean;
    disabledVariantNext?: boolean;
    disabledVariantPrevious?: boolean;
    regenerateDisabled?: boolean;
    showVariantNavigator?: boolean;
    variantLoading?: boolean;
    variantCurrent?: number;
    variantTotal?: number;
  }>(),
  {
    align: 'start',
    allowCopy: false,
    allowRegenerate: false,
    disabledVariantNext: false,
    disabledVariantPrevious: false,
    regenerateDisabled: false,
    showVariantNavigator: false,
    variantLoading: false,
    variantCurrent: 1,
    variantTotal: 1,
  },
);

const emit = defineEmits<{
  copy: [];
  regenerate: [];
  selectNextVariant: [];
  selectPreviousVariant: [];
}>();

function handleCopy() {
  emit('copy');
}

function handleRegenerate() {
  if (props.regenerateDisabled) {
    return;
  }
  emit('regenerate');
}

function handleSelectPreviousVariant() {
  emit('selectPreviousVariant');
}

function handleSelectNextVariant() {
  emit('selectNextVariant');
}
</script>

<template>
  <div
    v-if="allowCopy || allowRegenerate || showVariantNavigator"
    class="message-actions"
    :class="`is-${align}`"
  >
    <ChatAnswerVariantNavigator
      v-if="showVariantNavigator"
      :current="variantCurrent"
      :total="variantTotal"
      :disabled-prev="disabledVariantPrevious"
      :disabled-next="disabledVariantNext"
      :loading="variantLoading"
      @previous="handleSelectPreviousVariant"
      @next="handleSelectNextVariant"
    />

    <button
      v-if="allowCopy"
      type="button"
      class="message-actions__button"
      aria-label="复制消息"
      title="复制"
      @click="handleCopy"
    >
      <CopyDocument />
    </button>

    <button
      v-if="allowRegenerate"
      type="button"
      class="message-actions__button"
      :disabled="regenerateDisabled"
      aria-label="重新生成"
      title="重新生成"
      @click="handleRegenerate"
    >
      <RefreshRight />
    </button>
  </div>
</template>

<style scoped>
.message-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

.message-actions.is-end {
  justify-content: flex-end;
}

.message-actions__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;
}

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

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

.message-actions__button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.message-actions__button :deep(svg) {
  width: 15px;
  height: 15px;
}
</style>
