<script setup lang="ts">
import EventEditorDateTimeField from './EventEditorDateTimeField.vue'

interface Props {
  mode: 'edit' | 'view'
  notifications: Record<string, any>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'add-notification': []
  'remove-notification': [key: string]
}>()

const typeOptions = [
  { title: 'Email', value: 'email' },
  { title: 'Display', value: 'visual' }
]

const patternOptions = [
  { title: 'Relative', value: 'relative' },
  { title: 'Absolute', value: 'absolute' },
]

const anchorOptions = [
  { title: 'Start Time', value: 'start' },
  { title: 'End Time', value: 'end' }
]

const offsetPresets = [
  { title: '5 minutes before', value: 'PT5M' },
  { title: '10 minutes before', value: 'PT10M' },
  { title: '15 minutes before', value: 'PT15M' },
  { title: '30 minutes before', value: 'PT30M' },
  { title: '1 hour before', value: 'PT1H' },
  { title: '2 hours before', value: 'PT2H' },
  { title: '1 day before', value: 'P1D' },
  { title: '2 days before', value: 'P2D' },
  { title: '1 week before', value: 'P1W' },
]

const formatNotification = (notification: any) => {
  if (notification.pattern === 'absolute' && notification.when) {
    return `At ${new Date(notification.when).toLocaleString()}`
  } else if (notification.pattern === 'relative' && notification.offset) {
    const anchor = notification.anchor === 'end' ? 'end' : 'start'
    return `${notification.offset} before ${anchor}`
  }
  return 'Custom notification'
}
</script>

<template>
  <div v-if="Object.keys(notifications || {}).length > 0 || mode === 'edit'" class="event-editor-section">
    <div class="d-flex align-center justify-space-between mb-2">
      <div class="text-subtitle-1">Notifications</div>
      <v-btn v-if="mode === 'edit'"
        size="small"
        variant="outlined"
        @click="$emit('add-notification')">
        <v-icon left>mdi-plus</v-icon>
        Add
      </v-btn>
    </div>

    <!-- Read-only view -->
    <div v-if="mode === 'view'">
      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
        <div class="d-flex align-center justify-space-between">
          <div>
            <div class="mb-1">
              <v-icon :icon="notification.type === 'email' ? 'mdi-email' : notification.type === 'audible' ? 'mdi-bell-ring' : 'mdi-bell'" size="small" class="mr-2" />
              <strong>{{ notification.type || 'Notification' }}</strong>
            </div>
            <div class="text-caption text-grey">{{ formatNotification(notification) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit view -->
    <div v-else>
      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
        <div class="d-flex align-center ga-2">
          <v-row dense class="flex-grow-1">
            <v-col cols="6" sm="3">
              <v-select
                v-model="notification.type"
                :items="typeOptions"
                label="Type"
                variant="outlined"
                density="compact"
                hide-details
                :rules="[v => !!v || 'Type is required']"
              />
            </v-col>
            <v-col cols="6" sm="3">
              <v-select
                v-model="notification.pattern"
                :items="patternOptions"
                label="Pattern"
                variant="outlined"
                density="compact"
                hide-details
                :rules="[v => !!v || 'Pattern is required']"
              />
            </v-col>

            <v-col v-if="notification.pattern === 'absolute'" cols="12" sm="6">
              <EventEditorDateTimeField
                :model-value="notification.when"
                @update:model-value="notification.when = $event"
              />
            </v-col>

            <template v-else-if="notification.pattern === 'relative'">
              <v-col cols="6" sm="3">
                <v-select
                  v-model="notification.anchor"
                  :items="anchorOptions"
                  label="Anchor"
                  variant="outlined"
                  density="compact"
                  hide-details
                />
              </v-col>
              <v-col cols="6" sm="3">
                <v-combobox
                  v-model="notification.offset"
                  :items="offsetPresets"
                  item-title="title"
                  item-value="value"
                  label="Offset"
                  variant="outlined"
                  density="compact"
                  hide-details
                />
              </v-col>
            </template>
          </v-row>

          <v-btn
            icon="mdi-delete"
            size="small"
            color="error"
            variant="text"
            @click="$emit('remove-notification', key)">
          </v-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.event-editor-section {
  margin-bottom: 1.5rem;
}
</style>
