import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/Map/map_context.dart';
import 'package:tablet_app/Components/Map/map_view.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:webview_flutter/webview_flutter.dart';

import '../../constants.dart';
import '../custom_clipper.dart';

class PreviousViewWidget extends StatefulWidget {
  PreviousViewWidget({Key key, this.title}) : super(key: key);

  final String title;

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

class _PreviousViewWidget extends State<PreviousViewWidget> with TickerProviderStateMixin {
  static String url = "https://my.matterport.com/show/?m=k8bvdezfHbT";
  Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution
  double elementMinimizedSize = 200.0;
  double elementMaximizedSize = 400.0;
  bool minimized = false;

  double _leftMain;
  double _topMain;
  double _rightMain;
  double _bottomMain;

  double _leftTitle;
  double _topTitle;
  double _rightTitle;
  double _bottomTitle;

  double _leftElement;
  double _topElement;
  double _rightElement;
  double _bottomElement;

  double _leftMenu;
  double _topMenu;
  double _rightMenu;
  double _bottomMenu;

  AnimationController _controller;
  Completer<WebViewController> _webViewController = Completer<
      WebViewController>();

  @override
  void initState() {
    setState(() {
      _leftMain = (sizeScreen.height / 2) - elementMaximizedSize;
      _topMain = (sizeScreen.width / 2) - elementMaximizedSize;
      _rightMain = (sizeScreen.height / 2) - elementMaximizedSize;
      _bottomMain = (sizeScreen.width / 2) - elementMaximizedSize;

      _leftElement = (sizeScreen.height / 2) - elementMaximizedSize;
      _topElement = (sizeScreen.width / 2) - elementMaximizedSize;
      _rightElement = (sizeScreen.height / 2);
      _bottomElement = (sizeScreen.width / 2);

      _leftMenu = 0;
      _topMenu = sizeScreen.width * 0.15;
      _rightMenu = sizeScreen.height;
      _bottomMenu = sizeScreen.width * 0.2;

      _leftTitle = 0;
      _topTitle = 0;
      _rightTitle = sizeScreen.height;
      _bottomTitle = sizeScreen.width;
    });

    _controller = AnimationController(
        value: 12, vsync: this, duration: Duration(seconds: 1));
    _controller.animateBack(0);

    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      minimized = !minimized;

      if (minimized) {
        _controller.animateBack(5.0);
      } else {
        _controller.animateBack(0.0);
      }

      _leftMenu = 0;
      _topMenu = sizeScreen.width * 0.18;
      _rightMenu =
      minimized ? sizeScreen.height - elementMinimizedSize : sizeScreen.height;
      _bottomMenu = minimized ? sizeScreen.width * 0.2 : sizeScreen.width * 0.2;

      _leftMain =
      minimized ? 0 : (sizeScreen.height / 2) - elementMaximizedSize;
      _topMain =
      minimized ? sizeScreen.width - elementMinimizedSize : (sizeScreen.width /
          2) - elementMaximizedSize;
      _rightMain =
      minimized ? sizeScreen.height - elementMinimizedSize : (sizeScreen
          .height / 2) - elementMaximizedSize;
      _bottomMain =
      minimized ? 0 : (sizeScreen.width / 2) - elementMaximizedSize;

      _leftElement =
      minimized ? sizeScreen.height * 0.11 : (sizeScreen.height / 2) -
          elementMaximizedSize;
      _topElement =
      minimized ? 0 : (sizeScreen.width / 2) - elementMaximizedSize;
      _rightElement = minimized ? 0 : (sizeScreen.height / 2);
      _bottomElement = minimized ? 0 : (sizeScreen.width / 2);

      _leftTitle = 0;
      _topTitle = 0;
      _rightTitle =
      minimized ? sizeScreen.height - elementMinimizedSize : sizeScreen.height;
      _bottomTitle = minimized ? sizeScreen.width * 0.83 : sizeScreen.width;
    });
  }

  Future<bool> _onWillPop() async {
    return false;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  static Future<String> get _url async {
    await Future.delayed(Duration(seconds: 1));
    return url;
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    Size size = MediaQuery
        .of(context)
        .size;
    return new WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
        // Tablet size
        body: Container(
          height: size.height,
          width: size.width,
          child: Stack(
            children: <Widget>[
              // Main
              AnimatedPositioned(
                duration: const Duration(milliseconds: 1500),
                curve: Curves.easeInOutSine,
                left: _leftMain,
                top: _topMain,
                right: _rightMain,
                bottom: _bottomMain,
                child: InkWell(
                  onTap: () {
                    if (minimized) _incrementCounter();
                  },
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: new BorderRadius.only(
                          topRight: const Radius.circular(20.0),
                        ),
                        color: kSecondRed
                    ),
                    child: Center(
                      child: Text(
                        'MAIN MENU',
                        style: TextStyle(color: kTextRed, fontSize: 25),
                      ),
                    ),
                  ),
                ),
              ),
              // Title opened
              AnimatedPositioned(
                duration: const Duration(milliseconds: 1500),
                curve: Curves.easeInOutSine,
                left: _leftTitle,
                top: _topTitle,
                right: _rightTitle,
                bottom: _bottomTitle,
                child: InkWell(
                  onTap: () {
                    if (minimized) _incrementCounter();
                  },
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: new BorderRadius.only(
                          bottomRight: const Radius.circular(20.0),
                        ),
                        color: kSecondRed
                    ),
                    child: Center(
                      child: Text(
                        'Title opened element',
                        style: TextStyle(color: kTextRed, fontSize: 25),
                      ),
                    ),
                  ),
                ),
              ),
              // Element
              AnimatedPositioned(
                duration: const Duration(milliseconds: 1000),
                curve: Curves.easeInOutSine,
                top: _topElement,
                left: _leftElement,
                right: _rightElement,
                bottom: _bottomElement,
                child: Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: AnimatedBuilder(
                      animation: _controller,
                      builder: (BuildContext context, Widget child) {
                        return ClipPath(
                          clipper: WaveClipper(move: _controller.value,
                              minimized: minimized,
                              height: _leftMain,
                              width: _topMain),
                          clipBehavior: Clip.hardEdge,
                          child: InkWell(
                            onTap: () =>
                            {
                              if (!minimized) _incrementCounter()
                            },
                            child: AnimatedContainer(
                              // Define how long the animation should take.
                              duration: Duration(seconds: 2),
                              // Provide an optional curve to make the animation feel smoother.
                              curve: Curves.easeInOutCubic,
                              height: elementMaximizedSize,
                              width: elementMaximizedSize,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20.0),
                                gradient: LinearGradient(
                                  begin: Alignment.centerRight,
                                  end: Alignment.centerLeft,
                                  colors: [
                                    minimized
                                        ? kBackgroundSecondGrey
                                        : kSecondGrey,
                                    minimized ? kBackgroundSecondGrey : Colors
                                        .transparent
                                  ],
                                ),
                              ),
                              child: Center(
                                child: Padding(
                                  padding: const EdgeInsets.all(20.0),
                                  child: Container(
                                    width: size.width,
                                    height: size.height,
                                    child: ChangeNotifierProvider<MapContext>(
                                        create: (_) =>
                                            MapContext(new MapMarker(
                                                latitude: null,
                                                longitude: null,
                                                title: '',
                                                description: '',
                                                text: '')),
                                        child: MapViewWidget() /*FutureBuilder(
                                      future: _url,
                                      builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                          ? WebViewWidget(url: snapshot.data,)
                                          : CircularProgressIndicator()),*/
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
                ),
              ),
              // MENU
              AnimatedPositioned(
                duration: const Duration(milliseconds: 2000),
                curve: Curves.easeInOutSine,
                top: _topMenu,
                left: _leftMenu,
                right: _rightMenu,
                bottom: _bottomMenu,
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: new BorderRadius.only(
                        topRight: const Radius.circular(20.0),
                        bottomRight: const Radius.circular(20.0),
                      ),
                      color: Colors.lightBlue
                  ),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        if(minimized) ... [
                          Text('MENU'),
                          Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Sub menu 1'),
                                Text('Sub menu 2'),
                              ]
                          )
                        ]

                      ]
                  ),
                  /*Icon(
                    Icons.autorenew,
                    color: Colors.pink,
                    size: 24.0,
                    semanticLabel: 'Text to announce in accessibility modes',
                  ),*/
                ),
              ),
            ],
          ),
        ),
        /*floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),*/
      ),
    );
  }
}