<script setup lang="ts">
interface Props {
  to: string[]
  cc: string[]
  bcc: string[]
  subject: string
  showCc: boolean
  showBcc: boolean
}

defineProps<Props>()

defineEmits<{
  'update:to': [value: string[]]
  'update:cc': [value: string[]]
  'update:bcc': [value: string[]]
  'update:subject': [value: string]
  'toggle:cc': []
  'toggle:bcc': []
}>()
</script>

<template>
  <div class="composer-fields pa-4">
    <v-combobox
      :model-value="to"
      label="To"
      chips
      multiple
      closable-chips
      variant="outlined"
      density="compact"
      class="mb-2"
      @update:model-value="$emit('update:to', $event)"
    >
      <template #append-inner>
        <v-btn
          size="x-small"
          variant="text"
          class="mr-1"
          @click="$emit('toggle:cc')"
        >
          Cc
        </v-btn>
        <v-btn
          size="x-small"
          variant="text"
          @click="$emit('toggle:bcc')"
        >
          Bcc
        </v-btn>
      </template>
    </v-combobox>

    <v-combobox
      v-if="showCc"
      :model-value="cc"
      label="Cc"
      chips
      multiple
      closable-chips
      variant="outlined"
      density="compact"
      class="mb-2"
      @update:model-value="$emit('update:cc', $event)"
    />

    <v-combobox
      v-if="showBcc"
      :model-value="bcc"
      label="Bcc"
      chips
      multiple
      closable-chips
      variant="outlined"
      density="compact"
      class="mb-2"
      @update:model-value="$emit('update:bcc', $event)"
    />

    <v-text-field
      :model-value="subject"
      label="Subject"
      variant="outlined"
      density="compact"
      @update:model-value="$emit('update:subject', $event)"
    />
  </div>
</template>

<style scoped lang="scss">
.composer-fields {
  flex-shrink: 0;
}
</style>