import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/tools/noData.dart';
import 'package:star_lock/tools/pickers/pickers.dart';
import 'package:star_lock/tools/pickers/style/picker_style.dart';
import 'package:star_lock/tools/pickers/time_picker/model/date_mode.dart';
import 'package:star_lock/tools/pickers/time_picker/model/pduration.dart';
import 'package:star_lock/tools/pickers/time_picker/model/suffix.dart';

import '../../../../../appRouters.dart';
import '../../../../../app_settings/app_colors.dart';
import '../../../../../tools/dateTool.dart';
import '../../../../../tools/titleAppBar.dart';
import '../../../../../translations/trans_lib.dart';
import 'checkingInSetHolidays_entity.dart';
import 'checkingInSetHolidays_logic.dart';

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

  @override
  State<CheckingInSetHolidaysPage> createState() =>
      _CheckingInSetHolidaysPageState();
}

class _CheckingInSetHolidaysPageState extends State<CheckingInSetHolidaysPage> {
  final logic = Get.put(CheckingInSetHolidaysLogic());
  final state = Get.find<CheckingInSetHolidaysLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
          haveTitleWidget: true,
          titleWidget: titleWidget(),
          haveBack: true,
          backgroundColor: AppColors.mainColor,
          actionsList: [
            GestureDetector(
                onTap: () async {
                  var data = await Get.toNamed(
                      Routers.checkingInAddHolidaysPage,
                      arguments: {"companyId": state.companyId.value});
                  if (data != null) {
                    logic.editStaffLoadData();
                  }
                },
                child: Image.asset(
                  'images/icon_add_white.png',
                  width: 36.w,
                  height: 36.w,
                )),
            SizedBox(
              width: 30.w,
            ),
          ],
        ),
        body: Obx(() {
          return state.holidaysListData.value!.isNotEmpty
              ? ListView.builder(
                  itemCount: state.holidaysListData.value!.length,
                  itemBuilder: (c, index) {
                    HolidaysMonthListData holidaysMonthListData =
                        state.holidaysListData.value![index];
                    return _checkingInListMouthItem(holidaysMonthListData);
                  })
              : NoData();
        }));
  }

  Widget _checkingInListMouthItem(HolidaysMonthListData holidaysMonthListData) {
    return GestureDetector(
      child: Container(
        height: 140.h * holidaysMonthListData.listItem!.length + 20.w,
        padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 20.w),
        child: Row(
          children: [
            Container(
                color: colorWithMonth(int.parse(
                    holidaysMonthListData.listItem![0].month.toString())),
                width: 100.w,
                height: 140.h * holidaysMonthListData.listItem!.length,
                child: Center(
                    child: Text(
                  "${holidaysMonthListData.listItem![0].month}\n${TranslationLoader.lanKeys!.month!.tr}",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 28.sp, color: Colors.white),
                ))),
            SizedBox(
              height: 140.h * holidaysMonthListData.listItem!.length,
              width: 1.sw - 100.w - 20.w * 2,
              child: ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: holidaysMonthListData.listItem!.length,
                  itemBuilder: (c, index) {
                    ListItem listItem = holidaysMonthListData.listItem![index];
                    return _checkingInListItem(
                        index,
                        listItem.vacationName,
                        DateTool().dateToYMDString(
                            listItem.vacationStartDate.toString()),
                        DateTool().dateToYMDString(
                            listItem.vacationEndDate.toString()),
                        listItem.fillClassDate!.isNotEmpty
                            ? DateTool().dateToYMDString(
                                listItem.fillClassDate.toString())
                            : "", () async {
                      var data = await Get.toNamed(
                          Routers.checkingInDeletHolidaysPage,
                          arguments: {"listItem": listItem});
                      if (data != null) {
                        logic.editStaffLoadData();
                      }
                    });
                  }),
            ),
          ],
        ),
      ),
    );
  }

  Widget _checkingInListItem(
      int index,
      String? lockTypeTitle,
      String? vacationStartDate,
      String? vacationEndDate,
      String? makeUpClass,
      Function() action) {
    return GestureDetector(
      onTap: action,
      child: Column(
        children: [
          Container(
            color: Colors.white,
            height: 140.h,
            padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 10.h),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            lockTypeTitle!,
                            style: TextStyle(fontSize: 24.sp),
                          ),
                        ],
                      ),
                      SizedBox(height: 10.h),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            "${TranslationLoader.lanKeys!.libertyDay!.tr}:$vacationStartDate - $vacationEndDate",
                            style: TextStyle(fontSize: 20.sp),
                          ),
                        ],
                      ),
                      SizedBox(height: 5.h),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            "${TranslationLoader.lanKeys!.coverDate!.tr}:$makeUpClass",
                            style: TextStyle(fontSize: 20.sp),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 20.h),
              ],
            ),
          ),
          Container(color: AppColors.mainBackgroundColor, height: 1.h)
        ],
      ),
    );
  }

  Widget titleWidget() {
    return GestureDetector(
      onTap: () {
        showListType();
      },
      child: Obx(() => Container(
            width: 300.w,
            height: 50.h,
            color: AppColors.mainColor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "${state.selectYear.value}${TranslationLoader.lanKeys!.year!.tr}",
                  style: TextStyle(color: Colors.white, fontSize: 26.sp),
                ),
                SizedBox(
                  width: 5.w,
                ),
                Image.asset(
                  'images/main/icon_lockDetail_checkIn_topTitle.png',
                  width: 22.w,
                  height: 16.w,
                )
              ],
            ),
          )),
    );
  }

  void showListType() {
    Pickers.showDatePicker(
      context,
      // 模式，详见下方
      mode: DateMode.Y,
      // 后缀 默认Suffix.normal()，为空的话Suffix()
      suffix: Suffix(years: ' 年'),
      // 样式  详见下方样式
      pickerStyle: PickerStyle(
        cancelButton: GestureDetector(
          onTap: () {
            Get.back();
          },
          child: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.only(left: 22, right: 12),
            child: Text(TranslationLoader.lanKeys!.cancel!.tr,
                style: const TextStyle(color: Colors.black, fontSize: 16.0)),
          ),
        ),
        commitButton: GestureDetector(
          onTap: () {
            Get.back();
          },
          child: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.only(left: 22, right: 12),
            child: Text(TranslationLoader.lanKeys!.sure!.tr,
                style: const TextStyle(color: Colors.black, fontSize: 16.0)),
          ),
        ),
      ),
      // 默认选中
      selectDate: PDuration(year: 2023),
      minDate: PDuration(year: 1900),
      maxDate: PDuration(year: 2100),
      onConfirm: (p) {
        state.selectYear.value = p.year!;
        logic.editStaffLoadData();
      },
    );
  }

  Color colorWithMonth(int month) {
    Color colorType;
    switch (month) {
      case 1:
        colorType = const Color(0xFFb8d152);
        break;
      case 2:
        colorType = const Color(0xFF8bb639);
        break;
      case 3:
        colorType = const Color(0xFF5fb15a);
        break;
      case 4:
        colorType = const Color(0xFFeeb582);
        break;
      case 5:
        colorType = const Color(0xFFf3b749);
        break;
      case 6:
        colorType = const Color(0xFFe4893c);
        break;
      case 7:
        colorType = const Color(0xFFafb5d7);
        break;
      case 8:
        colorType = const Color(0xFF9a95b2);
        break;
      case 9:
        colorType = const Color(0xFF585da6);
        break;
      case 10:
        colorType = const Color(0xFFe696a9);
        break;
      case 11:
        colorType = const Color(0xFFb9706c);
        break;
      case 12:
        colorType = const Color(0xFFc8474e);
        break;
      default:
        colorType = const Color(0xFF333333);
        break;
    }
    return colorType;
  }
}