import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';

import '../themes/indicators/month_field_theme.dart';

class MonthFilterRow extends StatelessWidget {
  final TextEditingController monthController;
  final VoidCallback onFilter;
  final VoidCallback onRefresh;
  final GlobalKey<FormState> formKey;
  final bool isMobile;

  const MonthFilterRow({
    super.key,
    required this.monthController,
    required this.onFilter,
    required this.onRefresh,
    required this.formKey,
    this.isMobile = false,
  });

  @override
  Widget build(BuildContext context) {
    final spacing = 10.0;

    final fieldAndButtons = [
      buildMonthField(context),
      SizedBox(width: spacing),
      Tooltip(
        message: 'Filter',
        child: IconButton(
          icon: const Icon(
            Icons.filter_alt_outlined,
            color: const Color(0xFF94A3B8),
            size: 18,
          ),
          onPressed: () {
            if (formKey.currentState!.validate()) onFilter();
          },
        ),
      ),
      Tooltip(
        message: 'Refresh',
        child: IconButton(
          splashRadius: 2,
          icon: const Icon(
            Icons.refresh,
            color: const Color(0xFF94A3B8),
            size: 18,
          ),
          onPressed: onRefresh,
        ),
      ),
    ];

    return Form(
      key: formKey,
      child: isMobile
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                buildMonthField(context),
                const SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Tooltip(
                      message: 'Filter',
                      child: IconButton(
                        icon: const Icon(
                          Icons.filter_alt_outlined,
                          color: Color(0xFFF6F8F8),
                        ),
                        onPressed: () {
                          if (formKey.currentState!.validate()) onFilter();
                        },
                      ),
                    ),
                    Tooltip(
                      message: 'Refresh',
                      child: IconButton(
                        icon: const Icon(
                          Icons.refresh,
                          color: Color(0xFFF6F8F8),
                        ),
                        onPressed: onRefresh,
                      ),
                    ),
                  ],
                ),
              ],
            )
          : Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: fieldAndButtons,
            ),
    );
  }

  Widget buildMonthField(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Month', style: _textStyle),
        const SizedBox(height: 5),
        ThemedMonthField(
          hintText: "Select Month",
          txtwidth: MediaQuery.of(context).size.width * 0.2,
          txtheight: 40,
          // backgroundColor: const Color(0xFFECECEC),
          backgroundColor: const Color(0xFFFFFFFF),
          validator: (value) =>
              value == null || value.isEmpty ? "Month is required" : null,
          borderColor: Colors.grey.shade100,
          controller: monthController,
          // onDateSelected: (date) {
          //   monthController.text = DateFormat('MM-yyyy').format(date);
          // },
        ),
      ],
    );
  }

  static final _textStyle = GoogleFonts.poppins(
    fontSize: 12,
    fontWeight: FontWeight.w600,
  );
}
