<template>
  <div class="recurrence-pattern-form">
    <div class="form-group">
      <label>Recurrence Type</label>
      <select v-model="pattern.type" class="form-control" @change="handleTypeChange">
        <option value="daily">Daily</option>
        <option value="weekly">Weekly</option>
        <option value="monthly">Monthly</option>
        <option value="yearly">Yearly</option>
      </select>
    </div>

    <div class="form-group">
      <label>Repeat Every</label>
      <div class="input-group">
        <input
          type="number"
          v-model.number="pattern.interval"
          class="form-control"
          min="1"
          :max="getMaxInterval"
        >
        <span class="input-group-text">{{ getIntervalLabel }}</span>
      </div>
    </div>

    <!-- Weekly specific options -->
    <div v-if="pattern.type === 'weekly'" class="form-group">
      <label>Days of Week</label>
      <div class="days-of-week">
        <div
          v-for="day in weekDays"
          :key="day.value"
          class="day-checkbox"
        >
          <input
            type="checkbox"
            :id="'day-' + day.value"
            v-model="pattern.daysOfWeek"
            :value="day.value"
          >
          <label :for="'day-' + day.value">{{ day.label }}</label>
        </div>
      </div>
    </div>

    <!-- End date options -->
    <div class="form-group">
      <label>End Date (Optional)</label>
      <input
        type="date"
        v-model="pattern.endDate"
        class="form-control"
        :min="minDate"
      >
    </div>

    <div class="form-group">
      <label>Maximum Occurrences (Optional)</label>
      <input
        type="number"
        v-model.number="pattern.maxOccurrences"
        class="form-control"
        min="1"
        placeholder="Leave empty for unlimited"
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { RecurrencePattern } from '@/types/expense'

const props = defineProps<{
  modelValue: RecurrencePattern
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: RecurrencePattern): void
}>()

const pattern = ref<RecurrencePattern>({
  type: props.modelValue.type || 'monthly',
  interval: props.modelValue.interval || 1,
  daysOfWeek: props.modelValue.daysOfWeek || [],
  endDate: props.modelValue.endDate,
  maxOccurrences: props.modelValue.maxOccurrences
})

const weekDays = [
  { value: 0, label: 'Sun' },
  { value: 1, label: 'Mon' },
  { value: 2, label: 'Tue' },
  { value: 3, label: 'Wed' },
  { value: 4, label: 'Thu' },
  { value: 5, label: 'Fri' },
  { value: 6, label: 'Sat' }
]

const getIntervalLabel = computed(() => {
  switch (pattern.value.type) {
    case 'daily': return 'day(s)'
    case 'weekly': return 'week(s)'
    case 'monthly': return 'month(s)'
    case 'yearly': return 'year(s)'
    default: return ''
  }
})

const getMaxInterval = computed(() => {
  switch (pattern.value.type) {
    case 'daily': return 365
    case 'weekly': return 52
    case 'monthly': return 12
    case 'yearly': return 10
    default: return 1
  }
})

const minDate = computed(() => {
  const today = new Date()
  return today.toISOString().split('T')[0]
})

const handleTypeChange = () => {
  // Reset days of week when changing type
  if (pattern.value.type !== 'weekly') {
    pattern.value.daysOfWeek = []
  }
}

// Watch for changes and emit updates
watch(pattern, (newValue) => {
  emit('update:modelValue', newValue)
}, { deep: true })
</script>

<style scoped>
.recurrence-pattern-form {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.days-of-week {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.day-checkbox {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group-text {
  padding: 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-left: none;
  border-radius: 0 4px 4px 0;
}
</style>
