import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/tools/dateTool.dart';
import 'package:star_lock/tools/pickers/time_picker/model/pduration.dart';
import 'package:star_lock/tools/seletKeyCyclicDate/seletKeyCyclicDate_state.dart';

import '../../app_settings/app_colors.dart';
import '../commonItem.dart';
import '../pickers/pickers.dart';
import '../pickers/time_picker/model/date_mode.dart';
import '../submitBtn.dart';
import '../titleAppBar.dart';
import 'seletKeyCyclicDate_logic.dart';

/*
 电子钥匙、授权管理员、卡、指纹、遥控等添加添加循环日期公共界面
 */
class SeletKeyCyclicDatePage extends StatefulWidget {
  const SeletKeyCyclicDatePage({Key? key}) : super(key: key);

  @override
  State<SeletKeyCyclicDatePage> createState() => _SeletKeyCyclicDatePageState();
}

class _SeletKeyCyclicDatePageState extends State<SeletKeyCyclicDatePage> {
  final SeletKeyCyclicDateLogic logic = Get.put(SeletKeyCyclicDateLogic());
  final SeletKeyCyclicDateState state = Get.find<SeletKeyCyclicDateLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: '有效期'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          children: <Widget>[
            topWidget(),
            SizedBox(height: 10.h),
            middleWidget(),
            SizedBox(height: 10.h),
            bottomWidget(),
            Obx(() => Container(
                  margin: EdgeInsets.only(left: 20.w, right: 20.w, top: 30.h),
                  child: SubmitBtn(
                      btnName: '保存'.tr,
                      isDisabled: state.starDate.value.isNotEmpty &&
                          state.endDate.value.isNotEmpty &&
                          state.starTime.value.isNotEmpty &&
                          state.endTime.value.isNotEmpty &&
                          state.weekDay.value.isNotEmpty,
                      onClick: (state.starDate.value.isNotEmpty &&
                          state.endDate.value.isNotEmpty &&
                          state.starTime.value.isNotEmpty &&
                          state.endTime.value.isNotEmpty &&
                          state.weekDay.value.isNotEmpty)
                        ? logic.subBtnAction : null),
                )),
          ],
        ));
  }

  Widget topWidget() {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Obx(() => CommonItem(
                  leftTitel: '生效日期'.tr,
                  rightTitle: state.starDate.value,
                  isHaveDirection: true,
                  isHaveLine: true,
                  action: () {
                    final PDuration selectDate = PDuration.parse(
                        DateTime.tryParse(state.starDate.value));
                    Pickers.showDatePicker(context,
                        selectDate: selectDate,
                        mode: DateMode.YMD, onConfirm: (PDuration p) {
                      state.starDate.value = DateTool().getYMDHNDateString(p, 2);
                    });
                  })),
              Obx(() => CommonItem(
                  leftTitel: '失效日期'.tr,
                  rightTitle: state.endDate.value,
                  isHaveDirection: true,
                  action: () {
                    final PDuration selectDate =
                        PDuration.parse(DateTime.tryParse(state.endDate.value));
                    Pickers.showDatePicker(context,
                        selectDate: selectDate,
                        mode: DateMode.YMD, onConfirm: (PDuration p) {
                      state.endDate.value = DateTool().getYMDHNDateString(p, 2);
                    });
                  })),
              Container(height: 10.h),
            ],
          ),
        ),
      ],
    );
  }

  Widget middleWidget() {
    return Container(
      height: 160.h,
      width: 1.sw,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              height: 60.h,
              // color: Colors.red,
              padding: EdgeInsets.only(left: 30.w, top: 15.h),
              child: Text('有效日'.tr,
                  style:
                      TextStyle(fontSize: 24.sp, fontWeight: FontWeight.w600))),
          Container(
              height: 100.h,
              padding: EdgeInsets.only(left: 10.w, right: 10.w, bottom: 10.h),
              child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 7, childAspectRatio: 1.0),
                  itemCount: 7,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    index += 1;
                    return btnItem(index);
                  })),
        ],
      ),
    );
  }

  Widget btnItem(int index) {
    String dateStr;
    switch (index) {
      case 1:
        dateStr = '简写周一'.tr;
        break;
      case 2:
        dateStr = '简写周二'.tr;
        break;
      case 3:
        dateStr = '简写周三'.tr;
        break;
      case 4:
        dateStr = '简写周四'.tr;
        break;
      case 5:
        dateStr = '简写周五'.tr;
        break;
      case 6:
        dateStr = '简写周六'.tr;
        break;
      case 7:
        dateStr = '简写周日'.tr;
        break;
      default:
        dateStr = '';
        break;
    }
    return GestureDetector(
      onTap: () {
        setState(() {
          if (state.weekDay.value.contains(index)) {
            state.weekDay.value.remove(index);
          } else {
            state.weekDay.value.add(index);
          }
          state.weekDay.value.sort();
        });
      },
      child: Obx(() => Container(
            width: 40.w,
            height: 40.w,
            margin: EdgeInsets.all(10.w),
            decoration: BoxDecoration(
              color: state.weekDay.value.contains(index)
                  ? AppColors.mainColor
                  : Colors.white,
              border: Border.all(width: 1, color: AppColors.btnDisableColor),
              borderRadius: BorderRadius.circular(30.w),
            ),
            child: Center(
                child: Text(
              dateStr,
              style: TextStyle(
                  fontSize: 20.sp,
                  color: state.weekDay.value.contains(index)
                      ? Colors.white
                      : AppColors.darkGrayTextColor),
            )),
          )),
    );
  }

  Widget bottomWidget() {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Obx(() => CommonItem(
                  leftTitel: '生效时间'.tr,
                  rightTitle: state.starTime.value,
                  isHaveDirection: true,
                  isHaveLine: true,
                  action: () {
                    final PDuration selectDate = PDuration.parse(DateTool().dateToDateTime(state.starTime.value, 0));
                    Pickers.showDatePicker(context,
                        selectDate: selectDate,
                        mode: DateMode.HM, onConfirm: (PDuration p) {
                      state.starTime.value =
                          DateTool().getYMDHNDateString(p, 3);
                    });
                  })),
              Obx(() => CommonItem(
                  leftTitel: '失效时间'.tr,
                  rightTitle: state.endTime.value,
                  isHaveDirection: true,
                  action: () {
                    final PDuration selectDate = PDuration.parse(DateTool().dateToDateTime(state.endTime.value, 0));
                    Pickers.showDatePicker(context,
                        selectDate: selectDate,
                        mode: DateMode.HM, onConfirm: (PDuration p) {
                      state.endTime.value = DateTool().getYMDHNDateString(p, 3);
                    });
                  })),
              Container(height: 10.h),
            ],
          ),
        ),
      ],
    );
  }
}