import 'dart:math';

import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_platform/engine/toast/toast_engine.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/date_time_utils.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/shatter/select_calendar/calendar_bottom_sheet.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/facility_page_router.dart';
import 'facility_booking_view_model.dart';

@RoutePage()
class FacilityBookingPage extends HookConsumerWidget {
  const FacilityBookingPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const FacilityBookingPageRoute());
    } else {
      appRouter.push(const FacilityBookingPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(facilityBookingViewModelProvider.notifier);
    final state = ref.watch(facilityBookingViewModelProvider);

    return Scaffold(
      appBar: MyAppBar.appBar(context, "Kids party room", backgroundColor: context.appColors.whiteBG),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                MyTextView(
                  "${DateTimeUtils.getWeekday(state.selectedDate,languageCode: 'en')}, ${DateTimeUtils.formatDate(state.selectedDate,format: 'dd MMM yyyy')}",
                  textColor: context.appColors.textBlack,
                  fontSize: 17,
                  marginTop: 18,
                  marginBottom: 16,
                  marginLeft: 15,
                  isFontMedium: true,
                ).expanded(),
                const MyAssetImage(Assets.facilityConfirmDateIcon, width: 22.5, height: 22.5).marginOnly(right: 10).onTap(() {
                  //日历日期选择器
                  _datePickerBottomSheet(context, ref);
                }, padding: 5),
              ],
            ),

            //二周的日期选择
            WeeklyCalendar(
              selectedDate: state.selectedDate,
              onChangedSelectedDate: (dateTime) {
                Log.d("onChangedSelectedDate选中 - ${dateTime}}");
                viewModel.changeSelectedDate(dateTime);
              },
            ),

          ],
        ),
      ),
    );
  }

  //日期日历的选择器，底部弹窗选择
  void _datePickerBottomSheet(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(facilityBookingViewModelProvider.notifier);
    final state = ref.watch(facilityBookingViewModelProvider);

    showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0)),
      ),
      builder: (BuildContext context) {
        return CustomCalendarBottomSheet(
          firstDate: DateTime.now(),
          lastDate: DateTime.now().add(const Duration(days: 365)),
          selectedDate: state.selectedDate,
          locale: "en",
          onDateChange: (dateTime) {
            Navigator.pop(context);
            viewModel.changeSelectedDate(dateTime);
          },
        );
      },
    );
  }
}