import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/appRouters.dart';
import 'package:star_lock/main/lockDetail/doorLockLog/doorLockLog_entity.dart';
import 'package:star_lock/main/lockDetail/doorLockLog/doorLockLog_logic.dart';
import 'package:star_lock/tools/EasyRefreshTool.dart';
import 'package:star_lock/tools/advancedCalendar/src/widget.dart';
import 'package:star_lock/tools/commonDataManage.dart';
import 'package:star_lock/tools/menuItem/xsDropDownWidget.dart';
import 'package:star_lock/tools/noData.dart';
import 'package:star_lock/tools/showCupertinoAlertView.dart';
import 'package:timelines/timelines.dart';

import '../../../app_settings/app_colors.dart';
import '../../../tools/appRouteObserver.dart';
import '../../../tools/titleAppBar.dart';
import '../../../translations/trans_lib.dart';

class DoorLockLogPage extends StatefulWidget {
  const DoorLockLogPage({Key? key}) : super(key: key);

  @override
  State<DoorLockLogPage> createState() => _DoorLockLogPageState();
}

class _DoorLockLogPageState extends State<DoorLockLogPage> with RouteAware {
  final logic = Get.put(DoorLockLogLogic());
  final state = Get.find<DoorLockLogLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
        barTitle: TranslationLoader.lanKeys!.operatingRecord!.tr,
        haveBack: true,
        backgroundColor: AppColors.mainColor,
        actionsList: [
          Visibility(
              visible: CommonDataManage().currentKeyInfo.isLockOwner == 1
                  ? true
                  : false,
              child: TextButton(
                  onPressed: () {
                    ShowCupertinoAlertView().showClearOperationRecordAlert(
                        clearClick: () {
                      logic.clearOperationRecordRequest();
                    });
                  },
                  child: Text(
                    '清空记录'.tr,
                    style: TextStyle(color: Colors.white, fontSize: 24.sp),
                  ))),
        ],
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          topAdvancedCalendarWidget(),
          Divider(
            height: 1,
            color: AppColors.greyLineColor,
            indent: 30.w,
            endIndent: 30.w,
          ),
          eventDropDownWidget(),
          Expanded(child: timeLineView())
        ],
      ),
    );
  }

  //顶部日历小部件
  Widget topAdvancedCalendarWidget() {
    final theme = Theme.of(context);
    return Theme(
      data: theme.copyWith(
        textTheme: theme.textTheme.copyWith(
          titleMedium: theme.textTheme.titleMedium!.copyWith(
            fontSize: 16,
            color: theme.colorScheme.secondary,
          ),
          bodyLarge: theme.textTheme.bodyLarge!.copyWith(
            fontSize: 14,
            color: Colors.black54,
          ),
          bodyMedium: theme.textTheme.bodyMedium!.copyWith(
            fontSize: 12,
            color: Colors.black87,
          ),
        ),
        primaryColor: AppColors.mainColor,
        highlightColor: Colors.yellow,
        disabledColor: Colors.grey,
      ),
      child: Stack(
        children: [
          AdvancedCalendar(
            controller: state.calendarControllerCustom,
            events: state.events,
            weekLineHeight: 48.0,
            startWeekDay: 1,
            innerDot: true,
            keepLineSize: true,
            calendarTextStyle: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w400,
              height: 1.3125,
              letterSpacing: 0,
            ),
          ),
          Positioned(
            top: 8.0,
            right: 8.0,
            child: Obx(() => Text(
                  '${state.currentSelectDate.value.year}年${state.currentSelectDate.value.month}月',
                  style: theme.textTheme.titleMedium!.copyWith(
                    fontSize: 16,
                    color: theme.colorScheme.secondary,
                  ),
                )),
          ),
        ],
      ),
    );
  }

//事件下拉框组件
  Widget eventDropDownWidget() {
    return Container(
      margin: EdgeInsets.only(top: 20.h, left: 30.w, bottom: 10.h, right: 20.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Obx(() => XSDropDownWidget(
              items: state.getDropDownItemList,
              value: state.dropdownTitle.value,
              valueChanged: (value) {
                state.dropdownValue.value = int.parse(value);
                logic.mockNetworkDataRequest(isRefresh: true);
              })),
        ],
      ),
    );
  }

//时间轴组件
  Widget timeLineView() {
    return Container(
      margin: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 20.h, top: 20.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.w),
      ),
      child: Obx(() => EasyRefreshTool(
          onRefresh: () async {
            logic.mockNetworkDataRequest(isRefresh: true);
          },
          onLoad: () async {
            logic.mockNetworkDataRequest(isRefresh: false);
          },
          child: state.lockLogItemList.isNotEmpty
              ? Timeline.tileBuilder(
                  builder: _timelineBuilderWidget(),
                  theme: TimelineThemeData(
                    nodePosition: 0.04, //居左侧距离
                    connectorTheme: const ConnectorThemeData(
                      thickness: 1.0,
                      color: AppColors.greyLineColor,
                      indent: 0.5,
                    ),
                    indicatorTheme: const IndicatorThemeData(
                      size: 8.0,
                      color: AppColors.greyLineColor,
                      position: 0.4,
                    ),
                  ),
                )
              : NoData())),
    );
  }

  TimelineTileBuilder _timelineBuilderWidget() {
    return TimelineTileBuilder.fromStyle(
      contentsAlign: ContentsAlign.basic,
      itemCount: state.lockLogItemList.length,
      contentsBuilder: (context, index) {
        DoorLockLogDataItem timelineData = state.lockLogItemList[index];
        DateTime dateTime =
            DateTime.fromMillisecondsSinceEpoch(timelineData.operateDate!);
        String formattedTime =
            '${dateTime.hour.toString().padLeft(2, '0')}:${dateTime.minute.toString().padLeft(2, '0')}';

        return Padding(
          padding: EdgeInsets.only(left: 20.w, top: 20.h),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '$formattedTime ${timelineData.username!.isNotEmpty ? "${timelineData.username}用" : ""}${timelineData.recordTypeName}',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
              SizedBox(
                height: 10.h,
              ),
              GestureDetector(
                onTap: () {
                  Get.toNamed(Routers.videoLogDetailPage);
                },
                child: Stack(
                  children: [
                    timelineData.imagesUrl!.isNotEmpty
                        ? Image.network(
                            timelineData.imagesUrl!,
                            width: 260.w,
                            height: 260.h,
                          )
                        : Container(),
                    Positioned(
                      top: 150.h,
                      left: 10.w,
                      child: Image(
                        image: const AssetImage(
                            'images/main/icon_lockLog_play.png'),
                        width: 24.w,
                        height: 20.w,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 20.h,
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();

    /// 路由订阅
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    /// 取消路由订阅
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  /// 从上级界面进入 当前界面即将出现
  @override
  void didPush() {
    super.didPush();
    state.ifCurrentScreen.value = true;
  }

  /// 返回上一个界面 当前界面即将消失
  @override
  void didPop() {
    super.didPop();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) EasyLoading.dismiss(animation: true);
    state.ifCurrentScreen.value = false;
  }

  /// 从下级返回 当前界面即将出现
  @override
  void didPopNext() {
    super.didPopNext();
    state.ifCurrentScreen.value = true;
  }

  /// 进入下级界面 当前界面即将消失
  @override
  void didPushNext() {
    super.didPushNext();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) EasyLoading.dismiss(animation: true);
    state.ifCurrentScreen.value = false;
  }
}