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

class CollapsableEmails extends StatefulWidget {
  final List<String> thread; // email id's in the form xyz@gmail.com
  final List<String> threadHTML;

  CollapsableEmails({required this.thread, required this.threadHTML});

  @override
  State<CollapsableEmails> createState() => _CollapsableEmailsState();
}

class _CollapsableEmailsState extends State<CollapsableEmails> {
  List<String> emailsHTML = []; //html of the emails in the thread
  // build attachments with the forldar name and id
  Set<int> _expandedEmails = {}; //open emails
  List viewtypeIDs = []; //IDs of the viewtypes, order matters
  List heightOfViewTypes = []; //the height of each viewtype

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _registerViewFactory(widget.threadHTML);
  }

  void _registerViewFactory(List<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 = emailHTML
            .toJS; // temporarily index because it has to do all of them
      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 = 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,
      );
      viewtypeIDs.add(viewTypeId);
      heightOfViewTypes.add(heightOfEmail);
    }

    // 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,
    // );
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Expanded(
        child: ListView.builder(
          itemCount: widget.thread.length,
          itemBuilder: (context, index) {
            final isExpanded =
                _expandedEmails.contains(index); //check if email is expanded
            return Column(
              children: [
                ListTile(
                  title: Text("email $index"),
                  onTap: () {
                    setState(() {
                      if (isExpanded) {
                        _expandedEmails.remove(index);
                      } else {
                        _expandedEmails.add(index);
                      }
                    });
                  },
                ),
                if (isExpanded)
                  // if(viewtypeIDs[index] == null || heightOfViewTypes[index] == null)
                  //   const SizedBox(height: 100, child: Center(child: CircularProgressIndicator())),
                  SizedBox(
                    height:heightOfViewTypes[index].toDouble(),
                    child: HtmlElementView(
                        key: UniqueKey(), viewType: viewtypeIDs[index]),
                  ),
                Divider(),
              ],
            );
          },
        ),
      )
    ]);
  }
}