import 'dart:convert';
import 'dart:core';
import 'dart:ui';
import 'package:draggable_widget/draggable_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/utils.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/main.dart';
import 'package:mohem_flutter_app/models/chat/get_single_user_chat_list_model.dart';
import 'package:mohem_flutter_app/models/chat/get_user_login_token_model.dart';
import 'package:mohem_flutter_app/models/chat/incomingCall.dart';
import 'package:mohem_flutter_app/provider/chat_call_provider.dart';
import 'package:mohem_flutter_app/provider/chat_provider_model.dart';
import 'package:mohem_flutter_app/ui/landing/dashboard_screen.dart';
import 'package:provider/provider.dart';

class StartCallPage extends StatefulWidget {
  @override
  _StartCallPageState createState() => _StartCallPageState();
}

class _StartCallPageState extends State<StartCallPage> {
  final dragController = DragController();
  late ChatProviderModel chatProvider;
  late ChatCallProvider callProvider;
  var inCallData;

//userChatDetails
  @override
  void initState() {
    // callProvider = Provider.of<ChatCallProvider>(context, listen: false);
    // chatProvider = Provider.of<ChatProviderModel>(context, listen: false);
   // connection();
    super.initState();
  }

  @override
  void dispose() {
    if (chatHubConnection != null) {
      chatHubConnection.stop();
    }
    super.dispose();
  }

  // void connection() async {
  //   inCallData = await Utils.getStringFromPrefs("inComingCallData");
  //   dynamic callData = await jsonDecode(inCallData);
  //   AppState().setchatUserDetails = UserAutoLoginModel(
  //     response: Response.fromJson(callData[0]["loginDetails"]),
  //     errorResponses: null,
  //   );
  //   callProvider.startIncomingCallViaKit(inCallData: inCallData);
  //   try {
  //     await chatProvider.buildHubConnection(context: context, ccProvider: callProvider).whenComplete(() {
  //       callProvider.init();
  //     });
  //   } catch (e) {
  //     logger.w(e);
  //   }
  //
  //   // callProvider.afterHub();
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: Consumer2<ChatCallProvider, ChatProviderModel>(builder: (BuildContext context, ChatCallProvider provider, ChatProviderModel cpm, Widget? child) {
        return SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: provider.isVideoCall
                ? Stack(
                    alignment: FractionalOffset.center,
                    children: <Widget>[
                      if (provider.isVideoCall)
                        Positioned.fill(
                          child: RTCVideoView(
                            provider.remoteRenderer!,
                            objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
                            key: const Key('remote'),
                          ),
                        ),
                      if (provider.isVideoCall)
                        DraggableWidget(
                          bottomMargin: 20,
                          topMargin: 40,
                          intialVisibility: true,
                          horizontalSpace: 20,
                          shadowBorderRadius: 50,
                          initialPosition: AnchoringPosition.topLeft,
                          dragController: dragController,
                          normalShadow: const BoxShadow(spreadRadius: 0.0, blurRadius: 0.0),
                          draggingShadow: const BoxShadow(spreadRadius: 0.0, blurRadius: 0.0),
                          child: SizedBox(
                            height: 200,
                            width: 140,
                            child: RTCVideoView(
                              provider.localVideoRenderer,
                              mirror: true,
                              objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
                            ),
                          ),
                        ),
                      if (!provider.isVideoCall)
                        Positioned.fill(
                          child: ClipRect(
                            child: BackdropFilter(
                              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                              child: Container(
                                decoration: BoxDecoration(
                                  color: MyColors.grey57Color.withOpacity(
                                    0.3,
                                  ),
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    40.height,
                                    Row(
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: <Widget>[
                                        Container(
                                          margin: const EdgeInsets.all(21.0),
                                          child: Container(
                                            margin: const EdgeInsets.only(
                                              left: 10.0,
                                              right: 10.0,
                                            ),
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              mainAxisSize: MainAxisSize.min,
                                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                                              children: <Widget>[
                                                SvgPicture.asset(
                                                  "assets/images/user.svg",
                                                  height: 70,
                                                  width: 70,
                                                  fit: BoxFit.cover,
                                                ),
                                                10.height,
                                                Text(
                                                  provider.outGoingCallData.receiverName!,
                                                  style: const TextStyle(
                                                    fontSize: 21,
                                                    decoration: TextDecoration.none,
                                                    fontWeight: FontWeight.bold,
                                                    color: MyColors.white,
                                                    letterSpacing: -1.26,
                                                    height: 23 / 12,
                                                  ),
                                                ),
                                                const Text(
                                                  "On Call",
                                                  style: TextStyle(
                                                    fontSize: 16,
                                                    decoration: TextDecoration.none,
                                                    fontWeight: FontWeight.w600,
                                                    color: Color(
                                                      0xffC6C6C6,
                                                    ),
                                                    letterSpacing: -0.48,
                                                    height: 23 / 24,
                                                  ),
                                                ),
                                                const SizedBox(
                                                  height: 2,
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          padding: const EdgeInsets.only(
                            bottom: 20,
                            left: 40,
                            right: 40,
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              // if (provider.isVideoCall)
                              RawMaterialButton(
                                constraints: const BoxConstraints(),
                                onPressed: () {
                                  provider.loudOn();
                                },
                                elevation: 2.0,
                                fillColor: provider.isLoudSpeaker ? MyColors.green2DColor : Colors.grey,
                                padding: const EdgeInsets.all(
                                  10.0,
                                ),
                                shape: const CircleBorder(),
                                child: const Icon(
                                  Icons.volume_up,
                                  color: MyColors.white,
                                  size: 30.0,
                                ),
                              ),
                              RawMaterialButton(
                                constraints: const BoxConstraints(),
                                onPressed: () {
                                  provider.camOff();
                                },
                                elevation: 2.0,
                                fillColor: provider.isCamOff ? MyColors.green2DColor : Colors.grey,
                                padding: const EdgeInsets.all(
                                  10.0,
                                ),
                                shape: const CircleBorder(),
                                child: Icon(
                                  provider.isCamOff ? Icons.videocam_off : Icons.videocam,
                                  color: MyColors.white,
                                  size: 30.0,
                                ),
                              ),
                              RawMaterialButton(
                                constraints: const BoxConstraints(),
                                onPressed: () {
                                  provider.switchCamera();
                                },
                                elevation: 2.0,
                                fillColor: provider.isFrontCamera ? Colors.grey : MyColors.green2DColor,
                                padding: const EdgeInsets.all(
                                  10.0,
                                ),
                                shape: const CircleBorder(),
                                child: Icon(
                                  provider.isFrontCamera ? Icons.switch_camera_outlined : Icons.switch_camera,
                                  color: MyColors.white,
                                  size: 30.0,
                                ),
                              ),
                              RawMaterialButton(
                                constraints: const BoxConstraints(),
                                onPressed: () {
                                  provider.micOff();
                                },
                                elevation: 2.0,
                                fillColor: provider.isMicOff ? MyColors.green2DColor : Colors.grey,
                                padding: const EdgeInsets.all(
                                  10.0,
                                ),
                                shape: const CircleBorder(),
                                child: Icon(
                                  provider.isMicOff ? Icons.mic_off : Icons.mic,
                                  color: MyColors.white,
                                  size: 30.0,
                                ),
                              ),
                              RawMaterialButton(
                                constraints: const BoxConstraints(),
                                onPressed: () {
                                  provider.endCall().then((value) {
                                    if (value) {
                                      Navigator.of(context).pop();
                                    }
                                  });
                                },
                                elevation: 2.0,
                                fillColor: MyColors.redA3Color,
                                padding: const EdgeInsets.all(
                                  10.0,
                                ),
                                shape: const CircleBorder(),
                                child: const Icon(
                                  Icons.call_end,
                                  color: MyColors.white,
                                  size: 30.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  )
                : const SizedBox(
                    width: double.infinity,
                    height: 500,
                    child: Center(
                      child: CircularProgressIndicator(),
                    ),
                  ));
      }),
    );
  }
}