import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:intl/intl.dart';

import '../app/constant.dart';

class Clock extends HookConsumerWidget {
  const Clock({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final strHour = useState("");
    final strMinute = useState("");
    final strDate = useState("");
    final strMonth = useState("");
    final strYear = useState("");

    useEffect(() {
      final tmr = Timer.periodic(const Duration(seconds: 1), (timer) {
        final dt = DateFormat('yyyy-MMMM-dd-HH-mm-ss').format(DateTime.now());
        final splited = dt.split('-');
        final date = splited[2].toString();
        final month = splited[1].toString();
        final year = splited[0].toString();
        final hour = splited[3].toString();
        final minute = splited[4].toString();

        if (hour != strHour.value) strHour.value = hour;
        if (minute != strMinute.value) strMinute.value = minute;
        if (date != strDate.value) strDate.value = date;
        if (month != strMonth.value) strMonth.value = month;
        if (year != strYear.value) strYear.value = year;
      });
      return () {
        tmr.cancel();
      };
    }, []);
    return SizedBox(
      width: Constant.getActualX(context: context, x: 882),
      height: Constant.getActualY(context: context, y: 50),
      child: Container(
        width: Constant.getActualX(context: context, x: 882),
        height: Constant.getActualY(context: context, y: 50),
        // decoration: BoxDecoration(boxShadow: [
        //   BoxShadow(color: Colors.black.withOpacity(0.25), blurRadius: 8)
        // ], borderRadius: BorderRadius.circular(20), color: Colors.white),
        child: Text(
            '${strDate.value} ${strMonth.value} ${strYear.value}      ${strHour.value} : ${strMinute.value}',
            textAlign: TextAlign.left,
            style: Constant.body_3(context: context)
                .copyWith(color: Constant.textRed)),
      ),
    );
  }
}