import 'package:app/util/watchState.dart';
import 'package:flutter/material.dart';
import 'package:flutter_timer_countdown/flutter_timer_countdown.dart';

import '../state/timeStatusState.dart';

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

  @override
  Widget build(BuildContext context) {
    return WatchState<TimeStatusState>((context, state) {
      return Container(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Center(
              child: Icon(
                Icons.timer_outlined,
                size: 40,
              ),
            ),
            const VerticalDivider(
              endIndent: 20,
              indent: 20,
              color: Colors.white,
              thickness: 3,
              width: 40,
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    "Ab 20 Uhr",
                    style: TextStyle(fontSize: 20),
                  ),
                  TimerCountdown(
                    format: CountDownTimerFormat.hoursMinutesSeconds,
                    enableDescriptions: false,
                    spacerWidth: 5,
                    endTime: DateTime.now().add(state.remainingTimeUntilStart),
                    onEnd: () {
                      print("Timer finished");
                    },
                  ),
                ],
              ),
            ),
          ],
        )
      );
    });
  }
}