import 'package:crab_ui/augment.dart';
import 'package:web/web.dart' as web;
import 'dart:ui_web' as ui;
import 'dart:js_interop';
import 'structs.dart';
import 'package:flutter/material.dart';

class SonicEmailView extends StatefulWidget {
  SerializableMessage email;
  String emailHTML;

  SonicEmailView({required this.email, required this.emailHTML});

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

class _SonicEmailViewState extends State<SonicEmailView> {
  String viewTypeIDs = "";
  int heightOFViewtype = 0;
  bool _isLoaded = false;

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

  @override
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    await _registerViewFactory(widget.emailHTML);
    if (!mounted) return;
    setState(() {
      _isLoaded = true;
    });
  }

  Future<void> _registerViewFactory(String currentContent) async {
    // setState(() { //update to do item per item
    // each item to have itsviewtype ID
    // is this necessarey here??

    //could just move to collapsable

    // for (var emailHTML in widget.threadHTML) {
    String viewTypeId = 'email-${DateTime.now().millisecondsSinceEpoch}';

    final ghost = web.document.createElement('div') as web.HTMLDivElement
      ..style.visibility = 'hidden'
      ..style.position = 'absolute'
      ..style.width = '100%'
      ..style.overflow = 'auto'
      ..innerHTML = currentContent.toJS;
    web.document.body?.append(ghost);
    await Future.delayed(Duration(milliseconds: 10));

    final heightOfEmail = ghost.scrollHeight;
    ghost.remove();

    final HTMLsnippet = web.document.createElement('div') as web.HTMLDivElement
      ..id = viewTypeId
      ..innerHTML = widget
          .emailHTML.toJS; // temporarily index because it has to do all of them
    HTMLsnippet.style
      ..width = '100%'
      ..height = '${heightOfEmail}px'
      ..overflow = 'auto'
      ..scrollBehavior = 'smooth';

    ui.platformViewRegistry.registerViewFactory(
      viewTypeId,
      (int viewId) => HTMLsnippet,
    );
    this.viewTypeIDs = viewTypeId;
    this.heightOFViewtype = heightOfEmail;
    print(viewTypeIDs);
  }

  @override
  Widget build(BuildContext context) {
    return _isLoaded
        ? Scaffold(
            appBar: AppBar(title: Text(widget.email.subject)),
            body: Stack(
              children: [
                Column(
                  children: [
                    EmailToolbar(
                        onButtonPressed: () => {},
                        onJumpToSpan: _scrollToNumber),
                    Row(
                      // title of email
                      children: [
                        Text(
                          widget.email.subject,
                          style: TextStyle(fontSize: 30),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Text(
                          'from ${widget.email.name}',
                          style: TextStyle(fontSize: 18),
                        ),
                        Text(
                          '<${widget.email.from}>',
                          style: TextStyle(fontSize: 18),
                        ),
                        Spacer(),
                        Text(
                          '${widget.email.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.email.to.toString()}',
                          style: TextStyle(fontSize: 15),
                        )
                      ],
                    ),
                    Expanded(
                        // child: SizedBox(
                        // height: heightOFViewtype.toDouble(),
                        child: HtmlElementView(
                      key: UniqueKey(), viewType: this.viewTypeIDs,
                      // ),
                    ))
                  ],
                ),
              ],
            ),
          )
        : const Center(
            child: CircularProgressIndicator(),
          );
  }
}