import 'dart:async';
import 'package:fis_ui/index.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class RecordingMark extends FStatefulWidget {
  final DateTime startTime;

  const RecordingMark({Key? key, required this.startTime}) : super(key: key);

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

class _RecordingMarkState extends FState<RecordingMark> {
  late Timer _timer;
  Duration _duration = Duration.zero;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(milliseconds: 10), (timer) {
      setState(() {
        _duration = DateTime.now().difference(widget.startTime);
      });
    });
  }

  TextStyle get _textStyle => kIsWeb
      ? TextStyle(fontSize: 26, color: Colors.white)
      : TextStyle(fontSize: 16, color: Color.fromARGB(178, 255, 255, 255));

  @override
  FWidget build(BuildContext context) {
    int minutes = (_duration.inMilliseconds / (1000 * 60)).floor();
    int seconds = (_duration.inMilliseconds / 1000 % 60).floor();
    int milliseconds = (_duration.inMilliseconds % 1000 ~/ 10);
    return FRow(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FIcon(
          Icons.radio_button_checked,
          color: Colors.red,
          size: kIsWeb ? 20 : 16,
        ),
        FSizedBox(width: 5),
        FText(
          'REC ${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}:${milliseconds.toString().padLeft(2, '0')}',
          style: _textStyle,
        ),
      ],
    );
  }

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