<script setup lang="ts">
import {Copy, RotateCw} from '@easyflow/icons';

import ChatVariantNavigator from './ChatVariantNavigator.vue';

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

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

function handleRegenerate() {
  if (props.regenerateDisabled) {
    return;
  }
  emit('regenerate');
}
</script>

<template>
  <div
    v-if="allowCopy || allowRegenerate || showVariantNavigator"
    class="chat-message-toolbar"
    :class="`is-${align}`"
  >
    <button
      v-if="allowCopy"
      type="button"
      class="chat-message-toolbar__button"
      aria-label="复制消息"
      title="复制"
      @click="emit('copy')"
    >
      <Copy />
    </button>
    <button
      v-if="allowRegenerate"
      type="button"
      class="chat-message-toolbar__button"
      :disabled="regenerateDisabled"
      aria-label="重新生成"
      title="重新生成"
      @click="handleRegenerate"
      >
      <RotateCw />
    </button>
    <ChatVariantNavigator
      v-if="showVariantNavigator"
      class="chat-message-toolbar__navigator"
      :current="variantCurrent"
      :total="variantTotal"
      :disabled-next="disabledVariantNext"
      :disabled-previous="disabledVariantPrevious"
      :loading="variantLoading"
      @next="emit('selectNextVariant')"
      @previous="emit('selectPreviousVariant')"
    />
  </div>
</template>

<style scoped>
.chat-message-toolbar {
  display: flex;
  width: 100%;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}

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

.chat-message-toolbar__navigator {
  margin-left: auto;
}

.chat-message-toolbar__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-message-toolbar__button:hover:not(:disabled) {
  color: var(--el-text-color-primary);
  background: var(--el-fill-color-light);
}

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

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

.chat-message-toolbar__button :deep(svg) {
  width: 14px;
  height: 14px;
}
</style>
