import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/remedical/create_check/controller.dart';

/// 日期框
class CheckItemDateTime extends FisView<CreatecheckController>
    implements FInteractiveContainer {
  const CheckItemDateTime({
    Key? key,
    required this.configuration,
    required this.context,
    required this.buildKey,
    this.pageName = 'CheckItemDateTime',
  }) : super(key: key);
  final Map<String, dynamic> configuration;
  final BuildContext context;
  final String buildKey;
  @override
  final String pageName;

  _findRenderObject(GlobalKey key) {
    RenderBox? renderBox = key.currentContext!.findRenderObject() as RenderBox;
    // offset.dx , offset.dy 就是控件的左上角坐标
    var offset = renderBox.localToGlobal(Offset.zero);
    return [offset.dx, offset.dy + 38];
  }

  FCalendarDatePicker _calendarDatePicker(
    DatePickerMode mode,
    BuildContext context,
    Map<String, dynamic> configuration,
    String buildKey,
  ) {
    return FCalendarDatePicker(
      initialDate: DateTime.now(), // 初始化选中日期
      // currentDate: DateTime(2020, 10, 18),
      firstDate: DateTime(2020, 9, 10), // 开始日期
      lastDate: DateTime(2222, 9, 10), // 结束日期
      initialCalendarMode: mode, // 日期选择样式
      // 选中日期改变回调函数
      onDateChanged: (dateTime) async {
        Navigator.of(context).pop();
        controller.calendarDateValue(
          dateTime,
          configuration,
          buildKey,
        );
      },
      // 月份改变回调函数
      onDisplayedMonthChanged: (dateTime) {},
      // 筛选日期可不可点回调函数
      selectableDayPredicate: (dayTime) {
        if (dayTime == DateTime(2020, 10, 15) ||
            dayTime == DateTime(2020, 10, 16) ||
            dayTime == DateTime(2020, 10, 17)) {
          return false;
        }
        return true;
      },
    );
  }

  @override
  FWidget build(BuildContext context) {
    GlobalKey globalKey = GlobalKey(debugLabel: configuration['name']);
    final state = controller.state;
    return FObx(
      () => FBorderInput(
        key: globalKey,
        hintSize: 16,
        contentSize: 16,
        maxLength: 20,
        borderColor: Color.fromRGBO(234, 234, 234, 1),
        controller: TextEditingController(
          text: state.contents[buildKey + '-' + configuration['name']] != null
              ? state.contents[buildKey + '-' + configuration['name']]
              : null,
        ),
        suffixIcon: FMaterial(
          color: Colors.transparent,
          child: FIconButton(
            name: "showDateRangeDialog",
            businessParent: this,
            onPressed: () {
              var startTimePosition = _findRenderObject(globalKey);
              showDialog(
                context: context,
                barrierDismissible: false,
                builder: (BuildContext context) {
                  return FGestureDetector(
                    name: "back",
                    businessParent: this,
                    child: FStack(
                      children: [
                        FContainer(
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          // color: Colors.transparent, // 它的颜色为透明色
                        ),
                        FPositioned(
                          top: MediaQuery.of(context).size.height -
                                      startTimePosition[1] >
                                  400
                              ? startTimePosition[1]
                              : startTimePosition[1] - 380,
                          left: startTimePosition[0],
                          child: FContainer(
                            // margin: EdgeInsets.only(left: 16, top: 12),
                            constraints: BoxConstraints(
                              maxWidth: 310,
                              maxHeight: 400,
                            ),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 5,
                                  color: Color(0xffeeeeee),
                                )
                              ],
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: _calendarDatePicker(
                              DatePickerMode.day,
                              context,
                              configuration,
                              buildKey,
                            ),
                          ),
                        ),
                      ],
                    ),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  );
                },
              );
            },
            icon: FIcon(
              Icons.date_range_rounded,
            ),
          ),
        ),
        height: 38,
        hintText: i18nBook.remedical.selectTime.t,
      ),
    );
  }
}
