import 'dart:math';

import 'package:flutter/material.dart';
import 'dart:ui_web' as ui_web;
import 'package:web/web.dart' as web;

void main() async {
  runApp(const HtmlWidgetExample());
}

class HtmlWidgetExample extends StatelessWidget {
  const HtmlWidgetExample({super.key});

  @override
  Widget build(BuildContext context) {
    final children = <Widget>[];
    for (int i = 0; i < 50; i++) {
      children.add(DecoratedBox(
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        child: HtmlWidget(
          width: 100,
          height: 100,
        ),
      ));
      children.add(const SizedBox(
        height: 8,
      ));
    }
    return MaterialApp(
      title: 'Html Widget Example',
      home: Center(
        child: ListView(
          children: children,
        ),
      ),
    );
  }
}

class HtmlWidget extends StatefulWidget {
  const HtmlWidget({
    this.width = 100,
    this.height = 100,
  });

  final int height;
  final int width;

  @override
  State<StatefulWidget> createState() => _HtmlWidgetState();
}

class _HtmlWidgetState extends State<HtmlWidget> {
  final _element = (web.document.createElement('p') as web.HTMLParagraphElement)
    ..id = _generateId()
    ..innerText = 'Hello';

  static final _random = Random();
  static String _generateId({final int len = 10}) {
    const _chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz';
    return List.generate(len, (index) => _chars[_random.nextInt(_chars.length)])
        .join();
  }

  _HtmlWidgetState();

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

    _element.style.width = '${widget.width}px';
    _element.style.height = '${widget.height}px';

    ui_web.platformViewRegistry
        .registerViewFactory(_element.id, (_) => _element);
  }

  @override
  Widget build(BuildContext context) => SizedBox(
        width: widget.width.toDouble(),
        height: widget.height.toDouble(),
        child: HtmlElementView(
          key: Key(_element.id),
          viewType: _element.id,
        ),
      );
}