/*
 * @Author: ChenYaJin
 * @Date: 2023-08-07 10:01:44
 * @LastEditors: ChenYaJin
 * @LastEditTime: 2023-08-18 09:40:05
 * @Description: 伸缩日历组件
 */
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';
import 'package:task_package/src/view_models/work_statistic_store.dart';
import 'package:table_calendar/table_calendar.dart';

class TableCalendarComponent extends StatefulWidget {
  @override
  _TableCalendarComponentState createState() => _TableCalendarComponentState();
}

class _TableCalendarComponentState extends State<TableCalendarComponent> {
  final WorkStatisticStore store = Get.find<WorkStatisticStore>();
  DateTime _selectedDay = DateTime.now();
  DateTime _focusedDay = DateTime.now();
  RangeSelectionMode _rangeSelectionMode = RangeSelectionMode.toggledOff;

  @override
  Widget build(BuildContext context) {
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;

    setState(() {
      _focusedDay = store.showFocusedDay;
    });

    return GestureDetector(
      child: Wisdom.column(
          margin: EdgeInsets.symmetric(vertical: 10.pt),
          children: [
            // Obx(
            //   () =>
            Wisdom(
              color: Colors.white,
              child: TableCalendar(
                firstDay: DateTime.utc(2000, 01, 01),
                lastDay: DateTime.now(),
                focusedDay: _focusedDay,
                locale: 'zh_CN',
                startingDayOfWeek: StartingDayOfWeek.monday,
                calendarFormat: store.calendarFormat,
                rangeSelectionMode: _rangeSelectionMode,
                availableCalendarFormats: {
                  CalendarFormat.month: 'Month',
                  CalendarFormat.week: 'Week',
                },
                onFormatChanged: (format) {
                  setState(() {
                    store.changeCalendarFormat(format);
                  });
                },
                onPageChanged: (focusedDay) {
                  // _focusedDay = focusedDay;
                  store.onMonthChange(focusedDay);
                },
                onDaySelected: (selectedDay, focusedDay) {
                  setState(() {
                    _focusedDay = focusedDay;
                    _selectedDay = selectedDay;
                    store.selectedDay(selectedDay);
                  });
                },
                selectedDayPredicate: (day) {
                  return isSameDay(_selectedDay, day);
                },
                headerStyle: HeaderStyle(
                  titleTextStyle: TextStyle(fontSize: 15.pt),
                  formatButtonVisible: false,
                  titleCentered: true,
                ),
                calendarStyle: CalendarStyle(
                  outsideDaysVisible: true,
                ),
                daysOfWeekHeight: 40.pt,
                daysOfWeekStyle: DaysOfWeekStyle(
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: const Color.fromRGBO(213, 213, 213, 1),
                      ),
                    ),
                  ),
                ),
                pageAnimationEnabled: true,
                calendarBuilders: CalendarBuilders(
                  defaultBuilder: (context, day, focusedDay) => Center(
                      child: CalendarDayCell(
                    day: day,
                  )),
                  selectedBuilder: (context, day, focusedDay) => Center(
                    child: CalendarDayCell(
                      day: day,
                      decoration: BoxDecoration(
                        color: Colors.blue[300],
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                  todayBuilder: (context, day, focusedDay) => CalendarDayCell(
                    day: day,
                    decoration: BoxDecoration(
                      color: Colors.blue[100],
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),
            ),
            // ),
            Wisdom(
              color: colorScheme.background,
              margin: EdgeInsets.all(5.pt),
              child: WisText.c999(
                "注：此任务视图针对我监督及我的任务计划任务及产生的异常点位进行展示。",
                size: 13.pt,
                weight: FontWeight.w300,
              ),
            ),
            Wisdom.row(
              margin: EdgeInsets.symmetric(vertical: 5.pt, horizontal: 15.pt),
              children: [
                Wisdom(
                  height: 20.pt,
                  width: 3.pt,
                  color: colorScheme.primary,
                  margin: EdgeInsets.only(
                    right: 10.pt,
                  ),
                  borderRadius: BorderRadius.circular(4.pt),
                ),
                WisText(
                  '操作记录',
                  color: colorScheme.mainTitle,
                  weight: FontWeight.w600,
                  size: 15.pt,
                ),
              ],
            ),
          ]),
    );
  }
}

class CalendarDayCell extends StatefulWidget {
  const CalendarDayCell(
      {Key? key,
      required this.day,
      this.decoration,
      this.dotColor = Colors.red});

  final DateTime day;
  final Decoration? decoration;
  final Color dotColor;

  @override
  State<CalendarDayCell> createState() => _CalendarDayCellState();
}

class _CalendarDayCellState extends State<CalendarDayCell> {
  final WorkStatisticStore store = Get.find<WorkStatisticStore>();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(children: [
        Obx(
          () => Wisdom(
            width: 35.0,
            height: 35.0,
            margin: EdgeInsets.only(top: 4.pt),
            color: store.isSelectDay(widget.day) ? Colors.blue[600] : null,
            borderRadius: store.isSelectDay(widget.day)
                ? BorderRadius.circular(20.pt)
                : null,
            child: Center(
              child: Text(
                widget.day.day.toString(),
                style: TextStyle(
                    fontSize: 16,
                    color: store.isSelectDay(widget.day) ? Colors.white : null),
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 2,
        ),
        Obx(
          () => Wisdom(
            child: store.isAbnormalDay(widget.day)
                ? Container(
                    width: 5.0,
                    height: 5.0,
                    decoration: BoxDecoration(
                      color: widget.dotColor,
                      shape: BoxShape.circle,
                    ),
                  )
                : Container(),
          ),
        ),
      ]),
    );
  }
}
