import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:recording_tool/features/recording/view-model/view_model_recording.dart';

class RecordTimerWidget extends ConsumerStatefulWidget {
  const RecordTimerWidget({super.key});

  @override
  ConsumerState<RecordTimerWidget> createState() => _RecordTimerWidgetState();
}

class _RecordTimerWidgetState extends ConsumerState<RecordTimerWidget> {
  @override
  Widget build(BuildContext context) {
    final timerState = ref.watch(
      recordingViewModelProvider.select(
        (m) => (m.session.isRecording, m.session.elapsedLabel),
      ),
    );
    final (isRecording, elapsedLabel) = timerState;
    final displayTime = isRecording ? elapsedLabel : '00:00:00';

    return Positioned(
      top: 13.r,
      left: 0,
      right: 0,
      child: Center(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 380),
          curve: Curves.easeOutCubic,
          padding: EdgeInsets.symmetric(horizontal: 5.r, vertical: 0.r),
          decoration: BoxDecoration(
            color: isRecording ? Colors.red : Colors.transparent,
            borderRadius: BorderRadius.circular(6.r),
          ),
          child: Text(
            displayTime,
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.sp,
              shadows: [Shadow(color: Colors.black54, blurRadius: 6.r)],
            ),
          ),
        ),
      ),
    );
  }
}
