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/schedule/calendar/utils/calendar_utils.dart';
import 'package:flyinsono/views/mobile/mobile_calendar/clippers/triangle_clipper.dart';
import 'package:flyinsono/views/mobile/mobile_calendar/controller.dart';
import 'package:flyinsono/views/mobile/mobile_calendar/models.dart';

/// 月视图查看更多弹窗
class MonthViewSchedulePopup extends FisView<MobileCalendarController>
    implements FInteractiveContainer {
  MonthViewSchedulePopup({Key? key}) : super(key: key);

  @override
  String get pageName => "month view schedule popup";
  static const double _popupTriangleHeight = 14;
  static const double _popupTriangleWidth = 24;
  static const double _popupMargin = 7;

  @override
  FWidget build(BuildContext context) {
    return FObx(() {
      bool isOffstage = !controller.state.isShowMonthViewDetailPopup;
      double triangleTop = 0;
      double containerTop = 0;
      final selectedIndex = controller.state.selectedIndex4MonthPopup;

      ///  selectedIndex 取余数7，可以得到第几行第几个
      final row = selectedIndex ~/ 7;
      final column = selectedIndex % 7;

      /// 通过row和column计算出小三角的位置
      final gridWidth = (MediaQuery.of(context).size.width) / 7;
      final rowHeight = controller.monthViewContainerRowHeight;
      final triangleLeft =
          gridWidth * column + gridWidth / 2 - _popupTriangleWidth / 2;
      final highlightLeft = gridWidth * column;
      final highlightTop = row * rowHeight;
      if (row < 3) {
        final top = (row + 1) * rowHeight;
        triangleTop = top;
        containerTop = top;
      } else {
        final top = (row) * rowHeight;
        triangleTop = top - _popupTriangleHeight;
        containerTop = (row - 3) * rowHeight;
      }
      return FOffstage(
        offstage: isOffstage,
        child: FStack(
          children: [
            FPositioned(
              top: highlightTop,
              left: highlightLeft,
              child: FContainer(
                width: gridWidth,
                height: rowHeight - 1,
                color: Color.fromARGB(230, 250, 250, 250),
                child: FCenter(
                  child: FIcon(
                    Icons.close,
                    color: Colors.grey,
                  ),
                ),
              ),
            ),
            FGestureDetector(
              name: "popupMockLayer",
              businessParent: this,
              onTap: () {
                controller.closeMonthViewPopup();
              },
              behavior: HitTestBehavior.opaque,
              child: FContainer(
                width: double.infinity,
                height: double.infinity,
              ),
            ),
            _buildPopupContainer(containerTop, true),
            FPositioned(
              left: triangleLeft,
              top: triangleTop,
              child: ClipShadowPath(
                clipper: TriangleClipper(),
                shadow: BoxShadow(
                  color: Color.fromARGB(255, 160, 160, 160),
                  offset: Offset(0, 0),
                  spreadRadius: 0,
                  blurRadius: 16,
                ),
                child: FContainer(
                  height: _popupTriangleHeight,
                  width: _popupTriangleWidth,
                  decoration: BoxDecoration(
                    color: Color.fromARGB(255, 255, 255, 255),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ),
            _buildPopupContainer(containerTop, false),
          ],
        ),
      );
    });
  }

  /// 月视图查看更多弹窗容器
  /// [child] 子组件
  /// [containerTop] 容器距离顶部的距离
  /// [isShadowLayer] 是否是阴影层
  FWidget _buildPopupContainer(double containerTop, bool isShadowLayer) {
    return FContainer(
      margin: EdgeInsets.only(top: containerTop),
      width: double.infinity,
      height: controller.monthViewContainerHalfHeight,
      child: FContainer(
        margin: EdgeInsets.all(_popupMargin),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: isShadowLayer
              ? [
                  BoxShadow(
                    color: Color.fromARGB(255, 160, 160, 160),
                    offset: Offset(0, 0),
                    spreadRadius: 0,
                    blurRadius: 16,
                  ),
                ]
              : [],
        ),
        child: isShadowLayer ? null : _buildPopupList(),
      ),
    );
  }

  FWidget _buildPopupList() {
    return FObx(() {
      final List<MonthViewScheduleModel> scheduleList =
          controller.state.monthViewPopupScheduleList;
      final dateTime = controller.state.selectedDateTime4MonthPopup;
      final isNoSchedule = scheduleList.isEmpty;
      return FSingleChildScrollView(
        controller: controller.monthViewPopupScrollController,
        physics: BouncingScrollPhysics(),
        child: FColumn(
          children: [
            FContainer(
              margin: EdgeInsets.only(top: 15, left: 20),
              child: FRow(
                children: [
                  FText(
                    dateTime.day.toString(),
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  FSizedBox(width: 15),
                  FText(
                    CalendarUtils.getLunarDay(dateTime),
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.grey,
                    ),
                  )
                ],
              ),
            ),
            ...scheduleList.map((e) => _buildPopupItem(e)).toList(),
            if (isNoSchedule)
              FText(
                i18nBook.common.noData.t,
                style: TextStyle(fontSize: 14, color: Colors.grey),
              )
          ],
        ),
      );
    });
  }

  FWidget _buildPopupItem(MonthViewScheduleModel model) {
    return FInkWell(
      onTap: () => controller.openConsultationDetail(model.id),
      child: FContainer(
        padding: EdgeInsets.only(top: 10),
        child: FColumn(
          children: [
            FRow(
              children: [
                FContainer(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  width: 10,
                  height: 10,
                  decoration: BoxDecoration(
                    color: model.type.color,
                    borderRadius: BorderRadius.circular(5),
                  ),
                ),
                FAlign(
                  child: FText(
                    "${model.title} - ${model.type.typeName}",
                    style: TextStyle(fontSize: 14),
                  ),
                ),
              ],
            ),
            FContainer(
              margin: EdgeInsets.only(
                left: 30,
              ),
              padding: EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Color.fromARGB(255, 200, 200, 200),
                    width: 0.3,
                  ),
                ),
              ),
              child: FAlign(
                alignment: Alignment.topLeft,
                child: FText(
                  "${CalendarUtils.formatTimeRange(model.startTime, model.endTime)}",
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
