import 'dart:async';
import 'dart:io';

import 'package:ecosim/src/common/widgets/floating_menu_button.dart';
import 'package:flutter/material.dart';
import 'package:zoom_widget/zoom_widget.dart';

class SimulationOverlay extends StatefulWidget {
  const SimulationOverlay({
    super.key,
    required this.child,
    this.drawer,
    this.graphs,
    this.worldTickTimer,
    this.worldReplicateBoidsTimer,
    this.worldReplicateConsumablesTimer,
    required this.screenSize,
  });

  final Widget child;
  final Drawer? drawer;
  final Widget? graphs;
  final Timer? worldTickTimer;
  final Timer? worldReplicateBoidsTimer;
  final Timer? worldReplicateConsumablesTimer;
  final Size screenSize;

  @override
  State<SimulationOverlay> createState() => _SimulationOverlayState();
}

class _SimulationOverlayState extends State<SimulationOverlay> {
  bool showGraphs = false;

  @override
  Widget build(BuildContext context) {
    // final screenSize = MediaQuery.of(context).scale().size;
    final GlobalKey<ScaffoldState> globalKey = GlobalKey();

    return Scaffold(
      key: globalKey,
      // color: Colors.black,
      drawer: widget.drawer,
      body: Stack(
        children: [
          Row(
            children: [
              if (widget.graphs != null && showGraphs)
                Padding(
                  padding: const EdgeInsets.only(top: 64.0),
                  child: Container(
                    // color: const Color.fromARGB(150, 0, 0, 0),
                    width: 400,
                    decoration: const BoxDecoration(
                      color: Color.fromARGB(150, 0, 0, 0),
                      border: Border(
                        top: BorderSide(
                          color: Colors.white,
                          width: 2,
                        ),
                        right: BorderSide(
                          color: Colors.white,
                          width: 2,
                        ),
                        bottom: BorderSide(
                          color: Colors.white,
                          width: 2,
                        ),
                      ),
                    ),
                    child: widget.graphs!,
                  ),
                ),
              Expanded(
                child: Zoom(
                  // maxZoomHeight: 100,
                  // maxZoomWidth: 100,
                  // 1000: 0.35
                  // 2000: 0.168
                  // 500: 0.67
                  // initScale: 0.67,
                  initTotalZoomOut: true,
                  canvasColor: Colors.black,
                  backgroundColor: Colors.black,
                  centerOnScale: true,
                  // initScale: -0.1,
                  // initPosition: Offset(
                  //   widget.screenSize.width / 2,
                  //   widget.screenSize.height / 2,
                  // ),
                  enableScroll: true,
                  child: SizedBox(
                    width: widget.screenSize.width * 2,
                    child: Center(child: widget.child),
                  ),
                ),
              ),
            ],
          ),
          if (Navigator.canPop(context))
            Padding(
              padding: EdgeInsets.only(
                  top: (Platform.isAndroid || Platform.isIOS) ? 16.0 : 0.0),
              child: GestureDetector(
                onLongPress: () {
                  setState(() {
                    showGraphs = !showGraphs;
                  });
                },
                child: FloatingMenuButton(
                  drawer: widget.drawer,
                  globalKey: globalKey,
                  worldTickTimer: widget.worldTickTimer,
                  worldReplicateBoidsTimer: widget.worldReplicateBoidsTimer,
                ),
              ),
            ),
        ],
      ),
    );
  }
}
