import 'dart:html'
    show DivElement, Element, querySelector, querySelectorAll, window;

import './navbar.dart' show makeNavbar;

const image_header = '/img/icon.webp';

Future<Element> makeHeader() async {
  var header = Element.tag('header');
  header
    ..append(Element.img()
      ..attributes['src'] = image_header
      ..attributes['alt'] = 'Logo'
      ..attributes['height'] = '150px'
      ..attributes['width'] = '150px')
    ..append(querySelector('h1')!);
  final subt = header.querySelector('.subtitle');
  if (subt != null) {
    header.append(subt);
  }
  return header;
}

Future<void> wrapTables() async {
  for (var table in querySelectorAll('table')) {
    var largetable = DivElement()..className = 'largetable';
    table.before(largetable);
    largetable.children.add(table);
  }
}

// All images that are not nested inside a link will be linkified to themselves.
Future<void> linkifyImg() async {
  querySelectorAll('img').forEach((img) {
    if (img.parent!.tagName == 'P') {
      final link = Element.a()..attributes['href'] = img.attributes['src']!;
      img.insertAdjacentElement('beforeBegin', link);
      link.append(img);
    }
  });
}

Future<void> reorganizeHtml() async {
  final ls = window.localStorage;
  final lastUpdate = '20201221';
  if (ls['last-update'] != lastUpdate) {
    ls['last-update'] = lastUpdate;
    window.location.reload();
  }

  // Make navbar
  final navbar = await makeNavbar();

  // Make header
  final header = await makeHeader();

  // wrap tables in container for better SCSS display
  await wrapTables();

  // Make images not linking somewhere link to themselves
  await linkifyImg();

  // Add navbar to page
  querySelector('body')!.insertAdjacentElement('afterBegin', navbar);

  // Add headet to page
  querySelector('#content')!.insertAdjacentElement('beforeBegin', header);

  // Add correct class to TOC
  final toc = (querySelector('#table-of-contents') ??
      (Element.div()
        ..attributes['id'] = 'table-of-contents'
        ..innerText = 'Table of Contents Unavailable'))
    ..classes.add('dropdown');
  navbar.querySelector('#toc-drop')!.append(toc);

  // Remove all <br> tags from HTML
  querySelectorAll('br').forEach((br) => br.remove());
}