import 'package:flutter/material.dart';
import 'package:muaawana/config/provider.dart';
import 'package:muaawana/utils/utils_singleton.dart';

import '../config/lang_enum.dart';
import '../config/style.dart';
import '../providers/auth_provider.dart';
import '../providers/language_provider.dart';
import '../utils/text_style.dart';
import '../utils/text_widget.dart';
import 'custom_botton_widget.dart';

class MissingFieldsDialog extends StatefulWidget {
  const MissingFieldsDialog({super.key});

  @override
  State<MissingFieldsDialog> createState() => _MissingFieldsDialogState();
}

class _MissingFieldsDialogState extends State<MissingFieldsDialog> {
  final _phoneController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _phoneController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: languageSingleton.currentLangCode == Language.en
          ? TextDirection.ltr
          : TextDirection.rtl,
      child: Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Container(
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Title
              Txt(
                text: 'Phone number missing',
                style: tS(
                  "lato_regular",
                  24,
                  FontWeight.w700,
                  AppStyle.black,
                ),
              ),
              const SizedBox(height: 16),

              // Subtitle
              Txt(
                text: 'Your phone number is required for submitting a new request!',
                style: tS(
                  "lato_regular",
                  16,
                  FontWeight.w400,
                  Colors.grey[600]!,
                ),
              ),
              const SizedBox(height: 32),

              // Phone number input with country code
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: Colors.grey[300]!,
                    width: 1,
                  ),
                ),
                child: Row(
                  children: [
                    // Country code dropdown
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 16),
                      decoration: BoxDecoration(
                        border: Border(
                          right: BorderSide(
                            color: Colors.grey[300]!,
                            width: 1,
                          ),
                        ),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Txt(
                            text: '+968',
                            style: tS(
                              "lato_regular",
                              13,
                              FontWeight.w500,
                              Colors.grey.shade500,
                            ),
                          ),
                          const SizedBox(width: 4),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: Colors.grey.shade500,
                            size: 20,
                          ),
                        ],
                      ),
                    ),

                    // Phone number input
                    Expanded(
                      child: TextField(
                        controller: _phoneController,
                        style: tS('lato_regular', 16, FontWeight.w500, AppStyle.black),
                        decoration: InputDecoration(
                          hintText: 'Your Phone number',
                          hintStyle: tS(
                            'lato_regular',
                            16,
                            FontWeight.w400,
                            Colors.grey[500]!,
                          ),
                          border: InputBorder.none,
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 16,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 32),

              // Submit button
              Center(
                child: GestureDetector(
                  onTap: () async {if (_phoneController.text.isEmpty ||
                      _phoneController.text.length <= 7) {
                    // TODO: add state modification for border color on error indication change!
                    return;
                  }

                  context.read<AuthProvider>().updateProfile(util.user?.name ?? "",
                      _phoneController.text, util.user?.city ?? "");

                  Navigator.pop(context);
                  },
                  child: CustomButtonWidget(
                    height: 50,
                    width: 240,
                    borderRadius: 10,
                    fontSize: 22,
                    fillColor: AppNewStyle.primaryButton,
                    borderColor: AppNewStyle.primaryButton,
                    textColor: AppNewStyle.appBackground,
                    text: 'Submit',
                    fontFamily: 'Inter',
                    fontWeight: FontWeight.bold,
                    loader: context.read<AuthProvider>().loader,
                  ),
                ),
              ),

                // ElevatedButton(
                //   style: ElevatedButton.styleFrom(
                //     backgroundColor: const Color(0xFF1976D2),
                //     foregroundColor: Colors.white,
                //     padding: const EdgeInsets.symmetric(vertical: 16),
                //     shape: RoundedRectangleBorder(
                //       borderRadius: BorderRadius.circular(12),
                //     ),
                //     elevation: 0,
                //   ),
                //   child: Txt(
                //     text: 'Submit',
                //     style: tS(
                //       "lato_regular",
                //       18,
                //       FontWeight.w600,
                //       Colors.white,
                //     ),
                //   ),
                // ),
             // ),
            ],
          ),
        ),
      ),
    );
  }
}