<template>
  <a-drawer
    :open="open"
    @close="emit('update:open', false)"
    placement="right"
    width="80%"
    title="日历管理"
    :bodyStyle="{ padding: '0 24px 24px', display: 'flex', flexDirection: 'column', overflow: 'hidden' }"
  >
    <a-tabs v-model:activeKey="activeTab" class="calendar-drawer__tabs">
      <a-tab-pane key="calendar" tab="日历">
        <div class="calendar-drawer__toolbar">
          <a-radio-group :value="store.viewMode" @change="onViewChange">
            <a-radio-button value="calendar">日历</a-radio-button>
            <a-radio-button value="card">卡片</a-radio-button>
            <a-radio-button value="list">列表</a-radio-button>
          </a-radio-group>
          <a-space>
            <a-badge :count="store.pendingInvitations.length" :offset="[6, 0]">
              <a-button @click="emit('manage-invitations')">邀请管理</a-button>
            </a-badge>
            <a-button type="primary" @click="emit('create')">
              <template #icon><PlusOutlined /></template>
              新建事件
            </a-button>
          </a-space>
        </div>

        <div class="calendar-drawer__content">
          <CalendarGrid
            v-if="store.viewMode === 'calendar'"
            @create="onCreate"
            @edit="onEdit"
          />
          <CardView
            v-else-if="store.viewMode === 'card'"
            @edit="onEdit"
          />
          <ListView
            v-else
            @edit="onEdit"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="reminder" tab="提醒设置" force-render>
        <ReminderConfig />
      </a-tab-pane>

      <a-tab-pane key="sync" tab="同步设置" force-render>
        <SyncSettings />
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { useCalendarStore } from '@/stores/calendar'
import type { ICalendarEvent } from '@/api/calendar'
import CalendarGrid from './CalendarGrid.vue'
import CardView from './CardView.vue'
import ListView from './ListView.vue'
import ReminderConfig from './ReminderConfig.vue'
import SyncSettings from './SyncSettings.vue'

const store = useCalendarStore()

defineProps<{
  open: boolean
}>()

const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'create', start?: Date, end?: Date): void
  (e: 'edit', event: ICalendarEvent): void
  (e: 'manage-invitations'): void
}>()

const activeTab = ref<string>('calendar')

function onViewChange(e: { target: { value: string } }): void {
  store.setViewMode(e.target.value as 'calendar' | 'card' | 'list')
}

function onCreate(start?: Date, end?: Date): void {
  emit('create', start, end)
}

function onEdit(event: ICalendarEvent): void {
  emit('edit', event)
}
</script>

<style scoped>
.calendar-drawer__tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-drawer__tabs :deep(.ant-tabs-content-holder) {
  flex: 1;
  /* ponytail: was overflow:hidden which clipped ReminderConfig/SyncSettings content; auto enables scroll */
  overflow-y: auto;
}

.calendar-drawer__tabs :deep(.ant-tabs-content) {
  height: 100%;
}

.calendar-drawer__tabs :deep(.ant-tabs-tabpane) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-drawer__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  flex-shrink: 0;
}

.calendar-drawer__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--border-color-split);
  padding-top: var(--space-3);
}
</style>
