import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(const JankDemoApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JankDemoPage(),
    );
  }
}

class JankDemoPage extends StatefulWidget {
  const JankDemoPage({super.key});

  @override
  State<JankDemoPage> createState() => _JankDemoPageState();
}

class _JankDemoPageState extends State<JankDemoPage> {
  static const Duration _period = Duration(milliseconds: 2000);
  static const int _stallMs = 1200;

  bool _busy = false;
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(_period, (_) => _stall());
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  void _stall() {
    // A minimized window renders no frames, so a pending stall's post-frame
    // callback has not run yet; do not queue another one on top of it.
    if (_busy) {
      return;
    }
    setState(() => _busy = true);
    // Let the frame showing the red indicator reach the screen before
    // blocking the UI thread; a blocked thread cannot repaint.
    SchedulerBinding.instance.addPostFrameCallback((_) {
      Future<void>.delayed(const Duration(milliseconds: 100), () {
        final Stopwatch sw = Stopwatch()..start();
        while (sw.elapsedMilliseconds < _stallMs) {}
        if (mounted) {
          setState(() => _busy = false);
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 28,
              height: 28,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _busy ? Colors.red : Colors.green,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              _busy ? 'UI thread: BLOCKED' : 'UI thread: idle',
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 24),
            const Text(
              'Static content, nothing hoverable.\n'
              'Enter from the left or right window border while the light '
              'is red:\nthe resize cursor persists until the UI thread '
              'unblocks.',
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}