<script setup lang="ts">
import { ComposerMode } from '@/types/composer'

interface Props {
  mode: ComposerMode
  saveStatus: string
  canSend: boolean
  sending: boolean
}

defineProps<Props>()

defineEmits<{
  close: []
  send: []
}>()
</script>

<template>
  <v-toolbar density="compact" elevation="0" class="composer-toolbar">
    <v-btn
      variant="text"
      icon="mdi-close"
      @click="$emit('close')"
    >
      <v-icon>mdi-close</v-icon>
      <v-tooltip activator="parent" location="bottom">Close</v-tooltip>
    </v-btn>

    <v-toolbar-title>
      {{ mode === ComposerMode.Reply ? 'Reply' : mode === ComposerMode.Forward ? 'Forward' : 'New Message' }}
    </v-toolbar-title>

    <v-spacer />

    <span v-if="saveStatus" class="text-caption text-medium-emphasis mr-4">
      {{ saveStatus }}
    </span>

    <v-btn
      color="primary"
      :disabled="!canSend"
      :loading="sending"
      prepend-icon="mdi-send"
      @click="$emit('send')"
    >
      Send
    </v-btn>
  </v-toolbar>
</template>

<style scoped lang="scss">
.composer-toolbar {
  flex-shrink: 0;
  border-bottom: 1px solid rgb(var(--v-border-color));
}
</style>