import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/shifts/data/models/staff_shift.dart';

class ShiftTimerWidget extends StatefulWidget {
  final EventShiftRoleStaffStatus shiftStatus;
  final DateTime? clockIn;
  final DateTime? clockOut;

  const ShiftTimerWidget(
      {super.key,
      required this.shiftStatus,
      required this.clockIn,
      required this.clockOut});

  @override
  State<ShiftTimerWidget> createState() => _ShiftTimerWidgetState();
}

class _ShiftTimerWidgetState extends State<ShiftTimerWidget> {
  Color _borderColor() =>
      widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
          ? AppColors.tintDarkGreen
          : AppColors.grayStroke;

  Color _labelColor() => widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
      ? AppColors.statusSuccess
      : AppColors.blackGray;

  Color _counterColor() =>
      widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
          ? AppColors.statusSuccess
          : AppColors.blackBlack;

  Color _bgColor() => widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
      ? AppColors.tintGreen
      : AppColors.graySecondaryFrame;

  Color _dividerColor() =>
      widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
          ? AppColors.tintDarkGreen
          : AppColors.grayTintStroke;

  Duration _getDuration() {
    return widget.shiftStatus == EventShiftRoleStaffStatus.ongoing
        ? DateTime.now()
            .toUtc()
            .difference(widget.clockIn ?? DateTime.now().toUtc())
        : Duration.zero;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var duration = _getDuration();
    var hours = duration.inHours.remainder(24).abs().toString().padLeft(2, '0');
    var minutes =
        duration.inMinutes.remainder(60).abs().toString().padLeft(2, '0');
    var seconds =
        duration.inSeconds.remainder(60).abs().toString().padLeft(2, '0');

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          height: 80,
          decoration: BoxDecoration(
            color: _bgColor(),
            border: Border.all(color: _borderColor()),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildTimeText('hours'.tr(), hours),
              _divider(),
              _buildTimeText('minutes'.tr(), minutes),
              _divider(),
              _buildTimeText('seconds'.tr(), seconds),
            ],
          ),
        ),
      ],
    );
  }

  Widget _divider() {
    return SizedBox(
      width: 24,
      child: Center(
        child: Container(
          height: 24,
          width: 1,
          color: _dividerColor(),
        ),
      ),
    );
  }

  Widget _buildTimeText(String label, String time) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(time,
            style: AppTextStyles.headingH3.copyWith(color: _counterColor())),
        const Gap(6),
        Text(
          label,
          style: AppTextStyles.bodySmallReg.copyWith(color: _labelColor()),
        ),
      ],
    );
  }
}
