import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:marquee/marquee.dart';
import 'package:provider/provider.dart';
import 'package:yumi/ui_kit/components/sc_compontent.dart';
import 'package:yumi/ui_kit/components/text/sc_text.dart';
import 'package:yumi/app/routes/sc_fluro_navigator.dart';
import 'package:yumi/shared/tools/sc_lk_dialog_util.dart';
import 'package:yumi/shared/data_sources/sources/local/user_manager.dart';
import 'package:yumi/services/audio/rtc_manager.dart';
import 'package:yumi/modules/room/detail/room_detail_page.dart';
import 'package:yumi/modules/room/voice_room_route.dart';
import 'package:yumi/ui_kit/widgets/room/exit_min_room_page.dart';
import 'package:yumi/ui_kit/widgets/room/sc_edit_room_announcement_page.dart';

class RoomHeadWidget extends StatefulWidget {
  @override
  _RoomHeadWidgetState createState() => _RoomHeadWidgetState();
}

class _RoomHeadWidgetState extends State<RoomHeadWidget> {
  @override
  Widget build(BuildContext context) {
    return Selector<RtcProvider, _RoomHeadSnapshot>(
      selector: (context, provider) {
        final room = provider.currenRoom;
        final roomOwnerUserId = room?.roomProfile?.roomProfile?.userId ?? "";
        final currentUserId =
            AccountStorage().getCurrentUser()?.userProfile?.id ?? "";
        return _RoomHeadSnapshot(
          roomProfileId: room?.roomProfile?.roomProfile?.id,
          roomCover: room?.roomProfile?.roomProfile?.roomCover,
          roomName: room?.roomProfile?.roomProfile?.roomName ?? "",
          roomDisplayId: room?.roomProfile?.userProfile?.getID() ?? "",
          roomOwnerUserId: roomOwnerUserId,
          isRoomOwner: roomOwnerUserId == currentUserId,
        );
      },
      builder: (context, roomSnapshot, child) {
        return Row(
          children: [
            Row(
              children: [
                GestureDetector(
                  onTap: () {
                    showBottomInBottomDialog(
                      context,
                      RoomDetailPage(context.read<RtcProvider>().isFz()),
                    );
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(
                      vertical: 6.w,
                      horizontal: 12.w,
                    ),
                    child: Row(
                      children: [
                        Stack(
                          alignment: Alignment.center,
                          children: [
                            netImage(
                              url: resolveRoomCoverUrl(
                                roomSnapshot.roomProfileId,
                                roomSnapshot.roomCover,
                              ),
                              defaultImg: kRoomCoverDefaultImg,
                              width: 28.w,
                              height: 28.w,
                              borderRadius: BorderRadius.all(
                                Radius.circular(8.w),
                              ),
                            ),
                            Selector<RtcProvider, bool>(
                              selector: (c, p) => p.roomIsMute,
                              shouldRebuild: (prev, next) => prev != next,
                              builder: (_, isMute, __) {
                                return isMute
                                    ? ClipOval(
                                      child: Container(
                                        color: Colors.black54,
                                        padding: EdgeInsets.all(2.w),
                                        child: Image.asset(
                                          "sc_images/room/sc_icon_mic_mute.png",
                                          height: 18.w,
                                          width: 18.w,
                                        ),
                                      ),
                                    )
                                    : Container();
                              },
                            ),
                          ],
                        ),
                        SizedBox(width: 6.w),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(width: 10.w),
                            Container(
                              constraints: BoxConstraints(
                                maxWidth: 106.w,
                                maxHeight: 17.w,
                              ),
                              child:
                                  roomSnapshot.roomName.length > 10
                                      ? Marquee(
                                        text: roomSnapshot.roomName,
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          color: Color(0xffffffff),
                                          fontWeight: FontWeight.w600,
                                          decoration: TextDecoration.none,
                                        ),
                                        scrollAxis: Axis.horizontal,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        blankSpace: 40.0,
                                        velocity: 40.0,
                                        pauseAfterRound: Duration(seconds: 1),
                                        accelerationDuration: Duration(
                                          seconds: 1,
                                        ),
                                        accelerationCurve: Curves.easeOut,
                                        decelerationDuration: Duration(
                                          milliseconds: 500,
                                        ),
                                        decelerationCurve: Curves.easeOut,
                                      )
                                      : Text(
                                        roomSnapshot.roomName,
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          color: Color(0xffffffff),
                                          fontWeight: FontWeight.w600,
                                          decoration: TextDecoration.none,
                                        ),
                                      ),
                            ),

                            text(
                              "ID:${roomSnapshot.roomDisplayId}",
                              fontSize: 13.sp,
                              fontWeight: FontWeight.w600,
                              textColor: Colors.white70,
                            ),
                          ],
                        ),
                        SizedBox(width: 6.w),
                        !roomSnapshot.isRoomOwner
                            ? Selector<RtcProvider, bool>(
                              selector:
                                  (c, p) =>
                                      p.isFollowRoomRes?.followRoom ?? false,
                              shouldRebuild: (prev, next) => prev != next,
                              builder: (_, follow, __) {
                                return !follow
                                    ? GestureDetector(
                                      child: Image.asset(
                                        "sc_images/room/sc_icon_room_follow_no.png",
                                        width: 38.w,
                                        height: 22.w,
                                      ),
                                      onTap: () {
                                        context
                                            .read<RtcProvider>()
                                            .followCurrentVoiceRoom();
                                      },
                                    )
                                    : Container();
                              },
                            )
                            : Container(),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Spacer(),
            GestureDetector(
              child: Image.asset(
                "sc_images/room/sc_icon_room_edit_noti.png",
                width: 32.w,
                height: 32.w,
              ),
              onTap: () {
                if (context.read<RtcProvider>().isFz()) {
                  SCNavigatorUtils.push(
                    context,
                    "${VoiceRoomRoute.roomEdit}?need=false",
                    replace: false,
                  );
                } else {
                  SmartDialog.show(
                    tag: "showEditNotiPage",
                    alignment: Alignment.center,
                    animationType: SmartAnimationType.fade,
                    maskColor: Colors.black54,
                    builder: (_) {
                      return SCEditRoomAnnouncementPage();
                    },
                  );
                }
                // provider.extRoom();
              },
            ),
            SizedBox(width: 6.w),
            GestureDetector(
              child: Image.asset(
                "sc_images/room/sc_icon_room_ext_min.png",
                width: 32.w,
                height: 32.w,
              ),
              onTap: () {
                showCenterDialog(
                  context,
                  ExitMinRoomPage(
                    context.read<RtcProvider>().isFz(),
                    roomSnapshot.roomProfileId ?? "",
                  ),
                  barrierColor: Colors.black54,
                );
                // provider.extRoom();
              },
            ),
            SizedBox(width: 12.w),
          ],
        );
      },
    );
  }
}

class _RoomHeadSnapshot {
  const _RoomHeadSnapshot({
    required this.roomProfileId,
    required this.roomCover,
    required this.roomName,
    required this.roomDisplayId,
    required this.roomOwnerUserId,
    required this.isRoomOwner,
  });

  final String? roomProfileId;
  final String? roomCover;
  final String roomName;
  final String roomDisplayId;
  final String roomOwnerUserId;
  final bool isRoomOwner;

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) {
      return true;
    }
    return other is _RoomHeadSnapshot &&
        other.roomProfileId == roomProfileId &&
        other.roomCover == roomCover &&
        other.roomName == roomName &&
        other.roomDisplayId == roomDisplayId &&
        other.roomOwnerUserId == roomOwnerUserId &&
        other.isRoomOwner == isRoomOwner;
  }

  @override
  int get hashCode => Object.hash(
    roomProfileId,
    roomCover,
    roomName,
    roomDisplayId,
    roomOwnerUserId,
    isRoomOwner,
  );
}