import 'package:fis_theme/theme.dart';
import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/others/title_bar_buttons.dart';
import 'index.dart';

class NotificationListButton extends FisView<NotificationListController>
    implements FPage {
  const NotificationListButton({Key? key}) : super(key: key);

  @override
  String get pageName => "NotificationListButton";
  @override
  FWidget build(BuildContext context) {
    return FisBuilder<NotificationListController>(
      init: NotificationListController(),
      id: "notification_list_button",
      builder: (_) {
        return FMouseRegion(
          cursor: SystemMouseCursors.click,
          child: FGestureDetector(
            onTap: () {
              controller.openNotificationList(context);
            },
            name: "NotificationListButton",
            businessParent: this,
            child: FContainer(
              margin: EdgeInsets.only(right: 8),
              child: FCenter(
                child: FSizedBox(
                  width: 50,
                  height: 50,
                  child: FStack(
                    children: [
                      FCenter(
                        child: FIcon(
                          Icons.notifications_none,
                          color: Colors.white,
                        ),
                      ),
                      if (controller.unreadCount > 0)
                        FAlign(
                          alignment: Alignment.topRight,
                          child: FContainer(
                            padding: EdgeInsets.all(3),
                            constraints:
                                BoxConstraints(minWidth: 20, minHeight: 20),
                            decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: FText(
                              controller.unreadCount.toString(),
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white,
                                height: 1,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class NotificationListButton4Win extends NotificationListButton {
  const NotificationListButton4Win({Key? key}) : super(key: key);

  @override
  FWidget build(BuildContext context) {
    return FisBuilder<NotificationListController>(
      init: NotificationListController(),
      id: "notification_list_button",
      builder: (_) {
        return FRow(
          children: [
            FContainer(
              padding: EdgeInsets.all(3),
              constraints: BoxConstraints(minWidth: 20, minHeight: 20),
              decoration: BoxDecoration(
                color: Color.fromARGB(255, 29, 119, 192),
                borderRadius: BorderRadius.circular(10),
              ),
              child: FText(
                controller.unreadCount.toString(),
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  height: 1,
                ),
              ),
            ),
            FSizedBox(width: 5),
            HoverIconButton(
              Colors.white,
              () => controller.openNotificationList(context),
              FIcon(Icons.notifications_none),
              FTheme.ins.colorScheme.header,
              hoverColor: FTheme.ins.colorScheme.secondary,
              hoverIconColor: Colors.white,
              businessParent: this,
              name: 'notification_list_button',
            ),
          ],
        );
      },
    );
  }
}

class NotificationListButton4Mobile extends NotificationListButton {
  const NotificationListButton4Mobile({Key? key}) : super(key: key);

  @override
  FWidget build(BuildContext context) {
    return FisBuilder<NotificationListController>(
      init: NotificationListController(),
      id: "notification_list_button",
      builder: (_) {
        return FGestureDetector(
          name: 'notification_list_button',
          businessParent: this,
          onTap: () {
            controller.openNotificationList(context);
          },
          child: FContainer(
            width: 58,
            height: 58,
            child: FCenter(
              child: FSizedBox(
                child: FStack(
                  children: [
                    FCenter(
                      child: FIcon(
                        Icons.notifications_none,
                        color: Colors.black,
                        size: 30,
                      ),
                    ),
                    if (controller.unreadCount > 0)
                      FAlign(
                        alignment: Alignment.topRight,
                        child: FContainer(
                          margin: EdgeInsets.only(top: 5),
                          padding: EdgeInsets.all(3),
                          constraints:
                              BoxConstraints(minWidth: 20, minHeight: 20),
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: FText(
                            controller.unreadCount.toString(),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              height: 1,
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
