import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter_pickers/pickers.dart';
import 'package:flutter_pickers/time_picker/model/date_mode.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/electronicKey/electronicKeyPeriodValidity/KeyPeriodValidityModel.dart';

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

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

  @override
  State<ElectronicKeyPeriodValidityPage> createState() =>
      _ElectronicKeyPeriodValidityPageState();
}

class _ElectronicKeyPeriodValidityPageState
    extends State<ElectronicKeyPeriodValidityPage> {
  List validityTextList = [
    TranslationLoader.lanKeys!.sundayShort!.tr,
    TranslationLoader.lanKeys!.mondayShort!.tr,
    TranslationLoader.lanKeys!.tuesdayShort!.tr,
    TranslationLoader.lanKeys!.wednesdayShort!.tr,
    TranslationLoader.lanKeys!.thursdayShort!.tr,
    TranslationLoader.lanKeys!.fridayShort!.tr,
    TranslationLoader.lanKeys!.saturdayShort!.tr
  ];
  List validityDataList = []; //自定义数据块
  List selectIndexList = []; //选中的有效期数组
  String _selectEffectiveDate = ''; //生效时间
  String _selectFailureDate = ''; //失效时间
  late DateTime _effectiveDateTime;
  late DateTime _failureDateTime;
  @override
  void initState() {
    super.initState();

    for (var i = 0; i < validityTextList.length; i++) {
      int validityValue = 0;
      if (i == 0) {
        validityValue = 7;
      } else {
        validityValue = i;
      }
      KeyPeriodValidityModel model =
          KeyPeriodValidityModel(validityTextList[i], i, false, validityValue);
      validityDataList.add(model);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.periodValidity!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          children: [
            topWidget(),
            Container(
              color: Colors.white,
              height: 10.h,
            ),
            const Divider(
              height: 1,
              color: AppColors.greyLineColor,
            ),
            bottomWidget()
          ],
        ));
  }

  Widget topWidget() {
    return Container(
      height: 150.h,
      width: 1.sw,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              height: 60.h,
              // color: Colors.red,
              padding: EdgeInsets.only(left: 15.h, top: 15.h),
              child: Text(TranslationLoader.lanKeys!.periodValidity!.tr,
                  style:
                      TextStyle(fontSize: 24.sp, fontWeight: FontWeight.w600))),
          SizedBox(
              height: 90.h,
              child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 7, childAspectRatio: 1.0),
                  itemCount: 7,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    KeyPeriodValidityModel model = validityDataList[index];
                    return btnItem(model);
                  }))
        ],
      ),
    );
  }

  Widget btnItem(KeyPeriodValidityModel model) {
    return GestureDetector(
      onTap: () {
        model.isValidity = !model.isValidity;
        if (model.isValidity) {
          selectIndexList.add(model.validityValue);
        } else {
          selectIndexList.remove(model.validityValue);
        }
        setState(() {});
      },
      child: Container(
        width: 40.w,
        height: 40.w,
        margin: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          color: selectIndexList.contains(model.validityValue)
              ? Colors.blue
              : Colors.white,
          border: Border.all(width: 1, color: AppColors.greyBackgroundColor),
          borderRadius: BorderRadius.circular(30.w),
        ),
        child: Center(
            child: Text(
          model.validityText,
          style: TextStyle(
              fontSize: 20.sp,
              color: selectIndexList.contains(model.validityValue)
                  ? Colors.white
                  : AppColors.darkGrayTextColor),
        )),
      ),
    );
  }

  Widget bottomWidget() {
    return Column(
      children: [
        // CommonItem(
        //     leftTitel: TranslationLoader.lanKeys!.effectiveTime!.tr,
        //     rightTitle: _effectiveTime,
        //     isHaveDirection: true,
        //     isHaveLine: true,
        //     action: () {
        //       Pickers.showDatePicker(context, mode: DateMode.HM,
        //           onConfirm: (p) {
        //         _effectiveTime = '${intToStr(p.hour!)}:${intToStr(p.minute!)}';

        //         setState(() {});
        //       });
        //     }),
        // CommonItem(
        //     leftTitel: TranslationLoader.lanKeys!.failureTime!.tr,
        //     rightTitle: _failureTime,
        //     isHaveDirection: true,
        //     action: () {
        //       Pickers.showDatePicker(context, mode: DateMode.HM,
        //           onConfirm: (p) {
        //         _failureTime = '${intToStr(p.hour!)}:${intToStr(p.minute!)}';

        //         setState(() {});
        //       });
        //     }),
        // Container(height: 10.h),
        CommonItem(
            leftTitel: TranslationLoader.lanKeys!.effectiveDate!.tr,
            rightTitle: _selectEffectiveDate,
            isHaveDirection: true,
            isHaveLine: true,
            action: () {
              Pickers.showDatePicker(context, mode: DateMode.YMDHM,
                  onConfirm: (p) {
                _effectiveDateTime = DateTime.parse(
                    '${p.year}-${intToStr(p.month!)}-${intToStr(p.day!)} ${intToStr(p.hour!)}:${intToStr(p.minute!)}');
                _selectEffectiveDate = formatDate(_effectiveDateTime,
                    [yyyy, '-', mm, '-', dd, ' ', HH, ':', nn]);

                setState(() {});
              });
            }),
        CommonItem(
            leftTitel: TranslationLoader.lanKeys!.failureDate!.tr,
            rightTitle: _selectFailureDate,
            isHaveDirection: true,
            action: () {
              Pickers.showDatePicker(context, mode: DateMode.YMDHM,
                  onConfirm: (p) {
                _failureDateTime = DateTime.parse(
                    '${p.year}-${intToStr(p.month!)}-${intToStr(p.day!)} ${intToStr(p.hour!)}:${intToStr(p.minute!)}');
                _selectFailureDate = formatDate(_failureDateTime,
                    [yyyy, '-', mm, '-', dd, ' ', HH, ':', nn]);
                setState(() {});
              });
            }),
        Container(height: 40.h),
        SubmitBtn(
            btnName: TranslationLoader.lanKeys!.sure!.tr,
            borderRadius: 20.w,
            margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 30.w),
            padding: EdgeInsets.only(top: 25.w, bottom: 25.w),
            onClick: () {
              Map<String, dynamic> resultMap = {};
              resultMap['validityValue'] = selectIndexList;
              resultMap['starDate'] = _effectiveDateTime;
              resultMap['endDate'] = _failureDateTime;
              Navigator.pop(context, resultMap);
            }),
      ],
    );
  }

  String intToStr(int v) {
    return (v < 10) ? "0$v" : "$v";
  }
}