import 'dart:convert';
import 'dart:ui';

import 'package:flutter/cupertino.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/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/call.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/chat/call/start_call_screen.dart';
import 'package:provider/provider.dart';

class OutGoingCall extends StatefulWidget {
  CallDataModel outGoingCallData;
  bool isVideoCall;

  OutGoingCall({Key? key, required this.outGoingCallData, required this.isVideoCall}) : super(key: key);

  @override
  _OutGoingCallState createState() => _OutGoingCallState();
}

class _OutGoingCallState extends State<OutGoingCall> {
  late ChatCallProvider callProvider;
  late ChatProviderModel chatProvider;

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

  void init() {
    widget.isVideoCall ? callProvider.isVideoCall = true : callProvider.isVideoCall = false;
    callProvider.isOutGoingCall = true;
    callProvider.initLocalCamera(chatProvmodel: chatProvider, callData: widget.outGoingCallData, context: context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Consumer<ChatCallProvider>(builder: (BuildContext context, ChatCallProvider chatcp, Widget? child) {
              if (chatcp.isCallEnded) Navigator.pop(context);
              return Stack(
                alignment: FractionalOffset.center,
                children: <Widget>[
                  if (chatcp.isVideoCall)
                    Positioned.fill(
                      child: RTCVideoView(
                        callProvider.localVideoRenderer,
                        objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
                      ),
                    ),
                  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(
                                            widget.outGoingCallData.receiverName.toString().replaceAll(".", " "),
                                            style: const TextStyle(
                                              fontSize: 21,
                                              fontWeight: FontWeight.bold,
                                              color: MyColors.white,
                                              letterSpacing: -1.26,
                                              height: 23 / 12,
                                            ),
                                          ),
                                          const Text(
                                            "Ringing...",
                                            style: TextStyle(
                                              fontSize: 16,
                                              fontWeight: FontWeight.w600,
                                              color: Color(
                                                0xffC6C6C6,
                                              ),
                                              letterSpacing: -0.48,
                                              height: 23 / 24,
                                            ),
                                          ),
                                          const SizedBox(
                                            height: 2,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              // Container(
                              //   margin: const EdgeInsets.all(21.0),
                              //   width: MediaQuery.of(context).size.width,
                              //   decoration: cardRadius(15.0, color: MyColors.black, elevation: null),
                              //   child: Column(
                              //     crossAxisAlignment: CrossAxisAlignment.start,
                              //     mainAxisSize: MainAxisSize.min,
                              //     children: [
                              //       Container(
                              //         padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 6.0),
                              //         child: Text(
                              //           "TranslationBase.of(context).appoInfo",
                              //           style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: MyColors.white, letterSpacing: -0.64, height: 23 / 12),
                              //         ),
                              //       ),
                              //       Container(
                              //         padding: const EdgeInsets.only(left: 16.0, right: 16.0),
                              //         child: Text(
                              //           "widget.OutGoingCallData.appointmentdate + widget.OutGoingCallData.appointmenttime",
                              //           style: TextStyle(fontSize: 12.0, letterSpacing: -0.48, color: Color(0xff8E8E8E), fontWeight: FontWeight.w600),
                              //         ),
                              //       ),
                              //       Container(
                              //         padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 21.0),
                              //         child: Text(
                              //           "widget.OutGoingCallData.clinicname",
                              //           style: TextStyle(fontSize: 12.0, letterSpacing: -0.48, color: Color(0xff8E8E8E), fontWeight: FontWeight.w600),
                              //         ),
                              //       ),
                              //     ],
                              //   ),
                              // ),
                              const Spacer(),
                              Container(
                                margin: const EdgeInsets.only(
                                  bottom: 70.0,
                                  left: 49,
                                  right: 49,
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    // if (widget.isVideoCall)
                                    //   RawMaterialButton(
                                    //     onPressed: () {
                                    //       callProvider.camOff();
                                    //     },
                                    //     elevation: 2.0,
                                    //     fillColor: callProvider.isCamOff ? MyColors.green2DColor : Colors.grey,
                                    //     padding: const EdgeInsets.all(
                                    //       15.0,
                                    //     ),
                                    //     shape: const CircleBorder(),
                                    //     child: Icon(
                                    //       callProvider.isCamOff ? Icons.videocam_off : Icons.videocam,
                                    //       color: MyColors.white,
                                    //       size: 35.0,
                                    //     ),
                                    //   )
                                    // else
                                    //   RawMaterialButton(
                                    //     onPressed: () {
                                    //       callProvider.loudOn();
                                    //     },
                                    //     elevation: 2.0,
                                    //     fillColor: callProvider.isLoudSpeaker ? MyColors.green2DColor : Colors.grey,
                                    //     padding: const EdgeInsets.all(
                                    //       15.0,
                                    //     ),
                                    //     shape: const CircleBorder(),
                                    //     child: const Icon(
                                    //       Icons.volume_up,
                                    //       color: MyColors.white,
                                    //       size: 35.0,
                                    //     ),
                                    //   ),
                                    // RawMaterialButton(
                                    //   onPressed: () {
                                    //     callProvider.micOff();
                                    //   },
                                    //   elevation: 2.0,
                                    //   fillColor: callProvider.isMicOff ? MyColors.green2DColor : Colors.grey,
                                    //   padding: const EdgeInsets.all(
                                    //     15.0,
                                    //   ),
                                    //   shape: const CircleBorder(),
                                    //   child: Icon(
                                    //     callProvider.isMicOff ? Icons.mic_off : Icons.mic,
                                    //     color: MyColors.white,
                                    //     size: 35.0,
                                    //   ),
                                    // ),
                                    RawMaterialButton(
                                      onPressed: () {
                                        callProvider.endCall().then((bool value) {
                                          if (value) {
                                            Navigator.of(context).pop();
                                          }
                                        });
                                      },
                                      elevation: 2.0,
                                      fillColor: MyColors.redA3Color,
                                      padding: const EdgeInsets.all(
                                        15.0,
                                      ),
                                      shape: const CircleBorder(),
                                      child: const Icon(
                                        Icons.call_end,
                                        color: MyColors.white,
                                        size: 35.0,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            }),
    );
  }

  BoxDecoration cardRadius(double radius, {required Color color, double? elevation}) {
    return BoxDecoration(
      shape: BoxShape.rectangle,
      color: color ?? Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      boxShadow: <BoxShadow>[BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: elevation ?? 27, offset: const Offset(-2, 3))],
    );
  }
}