import 'dart:async';
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/classes/colors.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/provider/chat_call_provider.dart';
import 'package:provider/provider.dart';

class StartCallPage extends StatefulWidget {
  RTCVideoRenderer localRenderer;
  RTCVideoRenderer remoteRenderer;

  StartCallPage({required this.localRenderer, required this.remoteRenderer});

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

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

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

  void refresh() {
    Future.delayed(const Duration(seconds: 1), () {
      callProvider.notifyListeners();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<ChatCallProvider>(builder: (BuildContext context, ChatCallProvider provider, Widget? child) {
      return SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          alignment: FractionalOffset.center,
          children: [
            if (provider.isVideoCall)
              Positioned.fill(
                child: RTCVideoView(
                  widget.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(
                    widget.localRenderer,
                    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(
                                        callProvider.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: BoxConstraints(),
                      onPressed: () {
                        callProvider.loudOn();
                      },
                      elevation: 2.0,
                      fillColor: callProvider.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: 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: 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: 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: 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,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    });
  }
}