import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart' show ButtonSegment, SegmentedButton;
import 'package:syncfusion_flutter_calendar/calendar.dart' as calendar;

class AppointmentDataSource extends calendar.CalendarDataSource {
  AppointmentDataSource(List<calendar.Appointment> source) {
    appointments = source;
  }
}

class SchedulePage extends StatefulWidget {
  const SchedulePage({super.key});

  @override
  State<SchedulePage> createState() => _SchedulePageState();
}

class _SchedulePageState extends State<SchedulePage> {
  final calendar.CalendarController _calendarController = calendar.CalendarController();
  late List<calendar.Appointment> _appointments = [];
  String _viewType = 'week';

  @override
  Widget build(BuildContext context) {
    return ScaffoldPage.withPadding(
      header: const PageHeader(title: Text('日程安排')),
      content: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SegmentedButton<String>(
              showSelectedIcon: false,
              selected: <String>{_viewType},
              onSelectionChanged: (Set<String> value) {
                setState(() {
                  _viewType = value.first;
                  switch(_viewType) {
                    case 'week':
                      _calendarController.view = calendar.CalendarView.week;
                      break;
                    case 'month':
                      _calendarController.view = calendar.CalendarView.month;
                      break;
                    case 'schedule':
                      _calendarController.view = calendar.CalendarView.schedule;
                      break;
                  }
                });
              },
              segments: const [
                ButtonSegment(
                  value: 'week',
                  label: Text('周视图', style: TextStyle(fontFamily: 'CustomFont')),
                ),
                ButtonSegment(
                  value: 'month',
                  label: Text(
                    '月视图',
                    style: TextStyle(fontFamily: 'CustomFont'),
                  ),
                ),
                ButtonSegment(
                  value: 'schedule',
                  label: Text(
                    '日程视图',
                    style: TextStyle(fontFamily: 'CustomFont'),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Expanded(
              child: calendar.SfCalendar(
                view: calendar.CalendarView.week,
                controller: _calendarController,
                backgroundColor: Colors.grey[20],
                headerStyle: calendar.CalendarHeaderStyle(
                  backgroundColor: Colors.grey[20],
                ),
                dataSource: AppointmentDataSource(_appointments),
                firstDayOfWeek: 1,
                showDatePickerButton: true,
                showNavigationArrow: true,
                showTodayButton: true,
                allowViewNavigation: true,
                // 月份视图设置
                monthViewSettings: calendar.MonthViewSettings(
                  appointmentDisplayMode:
                  calendar.MonthAppointmentDisplayMode.appointment,
                  showAgenda: true,
                ),
                scheduleViewSettings: calendar.ScheduleViewSettings(
                  monthHeaderSettings: calendar.MonthHeaderSettings(
                    backgroundColor: Colors.grey[20],
                    height: 85,
                  ),
                ),
                // 时间区域设置
                timeSlotViewSettings: calendar.TimeSlotViewSettings(
                  startHour: 7,
                  endHour: 23,
                  timeFormat: 'HH:mm',
                  timeInterval: Duration(minutes: 30),
                  timeRulerSize: 60,
                ),
                // 选择日期回调
                onTap: (calendar.CalendarTapDetails details) {},
                // 选择日程回调
                onLongPress: (calendar.CalendarLongPressDetails details) async {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}