import 'package:flutter/material.dart';
import 'dart:ui_web' as ui;
import 'augment.dart';
// import 'dart:js_interop' as js; //eventually for manipulating css
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'collapsableEmails.dart';
import 'api_service.dart';


class EmailView extends StatefulWidget {
  final List<String> emailContent;
  final String from;
  final String name;
  final String to;
  final String subject;
  final String date;
  final String id;
  final List<String> messages;

  const EmailView({
    Key? key,
    required this.emailContent,
    required this.from,
    required this.name,
    required this.to,
    required this.subject,
    required this.date,
    required this.id,
    required this.messages,
  }) : super(key: key);
  @override
  _EmailViewState createState() => _EmailViewState();
}

class _EmailViewState extends State<EmailView> {
  //html css rendering thing
  late Key iframeKey;
  late String currentContent;
  late String viewTypeId; //make this a list too???
  Future<List<Map<String, dynamic>>>? _markerPositionsFuture;
  // TextEditingController _jumpController = TextEditingController();
  final hardcodedMarkers = [
    {'id': 'marker1', 'x': 50, 'y': 100},
    {'id': 'marker2', 'x': 150, 'y': 200},
    {'id': 'marker3', 'x': 250, 'y': 300},
  ];

  @override
  void initState() {
    super.initState();
    print("thread id? ${widget.id}");
    List<String> currentContent = widget
        .emailContent; //html of the email/ actually entire thread, gives me little space to play in between
    // i wonder if the other attributes change? because if so i have to add like some zooms in and out of the emails, as in collapse
    // _registerViewFactory(currentContent);
  }

  // void _registerViewFactory(List<String> currentContent) { // i think this doesnt work anymore
  //   setState(() { //update to do item per item
  //   // each item to have itsviewtype ID
  // // is this necessarey here??

  // //could just move to collapsable

  //     viewTypeId = 'iframe-${DateTime.now().millisecondsSinceEpoch}';
  //     final emailHTML = web.document.createElement('div') as web.HTMLDivElement
  //       ..id = viewTypeId
  //       ..innerHTML = currentContent[0].toJS; // temporarily index because it has to do all of them
  //     emailHTML.style
  //       ..width = '100%'
  //       ..height = '100%'
  //       ..overflow = 'auto'
  //       ..scrollBehavior = 'smooth';

  //     ui.platformViewRegistry.registerViewFactory(
  //       viewTypeId,
  //       (int viewId) => emailHTML,
  //     );
  //   });
  // }

  void _scrollToNumber(String spanId) {
    AugmentClasses.handleJump(spanId);
  }

  // TODO: void _invisibility(String )  //to make purple numbers not visible

  @override
  Widget build(BuildContext context) {
    // print("thread id ${widget.id}");
    ApiService.currThreadID = widget.id;
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.name),
        ),
        body: Stack(
          children: [
            Column(
              children: [
                EmailToolbar(
                  onJumpToSpan: _scrollToNumber,
                  onButtonPressed: () => {},
                  // AugmentClasses.handleJump(viewTypeId, '1');
                  // print("button got pressed?");

                  //   _registerViewFactory(r"""
                  // <h1>Welcome to My Website</h1>
                  // <p>This is a simple HTML page.</p>
                  // <h2>What is HTML?</h2>
                  // <p>HTML (HyperText Markup Language) is the most basic building~ block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).</p>
                  // <h3>Here's a simple list:</h3>
                  // <ul>
                  //     <li>HTML elements are the building blocks of HTML pages</li>
                  //     <li>HTML uses tags like <code>&lt;tag&gt;</code> to organize and format content</li>
                  //     <li>CSS is used with HTML to style pages</li>
                  // </ul>
                  // <p>Copyright © 2023</p>
                  // """);
                  //   print("change");
                  // widget.emailContent = r"

                  //
                ),
                Row(
                  // title of email
                  children: [
                    Text(
                      widget.subject,
                      style: TextStyle(fontSize: 30),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Text(
                      'from ${widget.name}',
                      style: TextStyle(fontSize: 18),
                    ),
                    Text(
                      '<${widget.from}>',
                      style: TextStyle(fontSize: 18),
                    ),
                    Spacer(),
                    Text(
                      '${widget.date}',
                      textAlign: TextAlign.right,
                    )
                  ],
                ),
                // TODO: make a case where if one of these is the user's email it just says me :)))))
                Row(
                  children: [
                    Text(
                      'to ${widget.to.toString()}',
                      style: TextStyle(fontSize: 15),
                    )
                  ],
                ),
                Expanded(
                  child: CollapsableEmails(
                    //change here
                    thread: widget.messages,  //this wont work in serializable
                    threadHTML: widget.emailContent,
                    threadIDs: widget.id,
                  ),
                ),
                // Expanded(
                //   child: HtmlElementView(
                //     key: UniqueKey(),
                //     viewType: viewTypeId,
                //   ),
                // ),
              ],
            ),

            // Overlay widgets dynamically based on marker positions
            // FutureBuilder<List<Map<String, dynamic>>>(
            //   future: _markerPositionsFuture,
            //   builder: (context, snapshot) {
            //     print("FutureBuilder state: ${snapshot.connectionState}");
            //     if (snapshot.connectionState == ConnectionState.waiting) {
            //       return Center(child: CircularProgressIndicator());
            //     }
            //     if (snapshot.hasError) {
            //       print("Error in FutureBuilder: ${snapshot.error}");
            //       return Center(child: Text('error loading markers'));
            //     }
            //     if (snapshot.hasData && snapshot.data != null) {
            //       final markers = snapshot.data!;
            //       return Stack(
            //         children: markers.map((marker) {
            //           return Positioned(
            //             left: marker['x'].toDouble(),
            //             top: marker['y'].toDouble(),
            //             child: GestureDetector(
            //               onTap: () {
            //                 print('Tapped on ${marker['id']}');
            //               },
            //               child: Container(
            //                 width: 50,
            //                 height: 50,
            //                 color: Colors.red,
            //                 child: Center(
            //                   child: Text(
            //                     marker['id'],
            //                     style: TextStyle(color: Colors.white),
            //                   ),
            //                 ),
            //               ),
            //             ),
            //           );
            //         }).toList(),
            //       );
            //     }

            //     return SizedBox.shrink(); // No markers found
            //   },
            // ),
            // Red widget overlay
            // Positioned(
            //   left: 8, // Adjust based on your desired position
            //   top: 100 + 44 + 5, // Adjust based on your desired position
            //   child: IgnorePointer(
            //     ignoring: true, // Ensures the iframe remains interactive
            //     child: Container(
            //       color: Colors.red,
            //       width: 100,
            //       height: 50,
            //       child: Center(
            //         child: Text(
            //           'Overlay',
            //           style: TextStyle(color: Colors.white),
            //         ),
            //       ),
            //     ),
            //   ),
            // ),
          ],
        ));
  }
}