/// Checkout Date Picker Field Widget
///
/// Reusable date picker field for checkout forms.
library;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';

/// Checkout Date Picker Field
///
/// Date picker field with calendar dialog.
class CheckoutDatePickerField extends HookWidget {
  final String label;
  final ValueNotifier<DateTime?> selectedDate;

  const CheckoutDatePickerField({
    super.key,
    required this.label,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Ngày nhận hàng mong muốn',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: Color(0xFF1E293B),
          ),
        ),
        const SizedBox(height: 8),
        InkWell(
          onTap: () async {
            final picked = await showDatePicker(
              context: context,
              initialDate: DateTime.now().add(const Duration(days: 1)),
              firstDate: DateTime.now().add(const Duration(days: 1)),
              lastDate: DateTime.now().add(const Duration(days: 30)),
            );
            if (picked != null) {
              selectedDate.value = picked;
            }
          },
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: const Color(0xFFF8FAFC),
              borderRadius: BorderRadius.circular(AppRadius.input),
              border: Border.all(color: const Color(0xFFE2E8F0)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  selectedDate.value != null
                      ? _formatDate(selectedDate.value!)
                      : 'Chọn ngày',
                  style: TextStyle(
                    fontSize: 14,
                    color: selectedDate.value != null
                        ? const Color(0xFF212121)
                        : AppColors.grey500.withValues(alpha: 0.6),
                  ),
                ),
                const Icon(
                  FontAwesomeIcons.calendar,
                  size: 20,
                  color: AppColors.grey500,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  /// Format date
  String _formatDate(DateTime date) {
    return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
  }
}
