import 'package:wanisclient/config/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

import '../../config/language/language_enum.dart';
import '../../providers/language_provider.dart';
import '../../utils/colors.dart';

class EditLanguageScreen extends StatelessWidget {
  const EditLanguageScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final lp = context.watch<LanguageProvider>();

    // Language options with their corresponding data
    final languages = [
      {
        'name': 'English',
        'localName': 'English',
        'flag': 'assets/images/New/FlagsEN.svg',
        'value': 'English',
      },
      {
        'name': 'French',
        'localName': 'Français',
        'flag': 'assets/images/New/FlagsFR.svg',
        'value': 'French',
      },
      {
        'name': 'Arabic',
        'localName': 'عربي',
        'flag': 'assets/images/New/FlagTN.svg',
        'value': 'Arabic',
      },
    ];
    final languageProvider = context.watch<LanguageProvider>();
    bool isArabic = languageProvider.currentLangCode == Language.ar;
    return Scaffold(
      backgroundColor: Colors.white,
      // appBar: AppBar(
      //   backgroundColor: Colors.white,
      //   elevation: 0,
      //   leading: IconButton(
      //     onPressed: () => Navigator.pop(context),
      //     icon: const Icon(
      //       Icons.arrow_back,
      //       color: Colors.black,
      //     ),
      //   ),
      //   title: const Txt(text:
      //     'Language',
      //     style: TextStyle(
      //       color: Colors.black,
      //       fontSize: 18,
      //       fontWeight: FontWeight.w600,
      //     ),
      //   ),
      //   centerTitle: true,
      // ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            const SizedBox(height: 12,),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [

                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Container(
                      width: 32,
                      height: 32,
                      margin: const EdgeInsets.symmetric(vertical: 12),
                      decoration: BoxDecoration(
                        color: AppNewColors.lightgray,
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: [
                          BoxShadow(
                            color: AppNewColors.black.withOpacity(.1),
                            blurRadius: 1,
                            offset: const Offset(2, 1),
                          ),
                        ],
                      ),
                      child: const Icon(
                        Icons.arrow_back,
                        color: AppNewColors.black,
                        size: 16,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: Txt(
                        text: 'Language',
                        style: TextStyle(
                          color: AppNewColors.titleTextColor,
                          fontSize: 18,
                          fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                          fontWeight: FontWeight.w600,
                          height: 1.23,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 32), // to balance the back button space
                ],
              ),
            ),
            Expanded(
              child: Column(

                children: languages.map((language) {
                  final isSelected = lp.dropValue == language['value'];

                  return Container(
                    margin: const EdgeInsets.only(bottom: 12),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.05),
                          blurRadius: 10,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: Material(
                      color: Colors.transparent,
                      child: InkWell(
                        borderRadius: BorderRadius.circular(12),
                        onTap: () {
                          lp.setDropValue(language['value'] as String);
                          // Optional: Navigate back after selection
                          // Navigator.pop(context);
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(16),
                          child: Row(
                            children: [
                              // Flag with circular background
                              Container(
                                width: 40,
                                height: 40,
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.grey.withOpacity(0.1),
                                ),
                                child: Center(
                                  child: ClipOval(
                                    child: SvgPicture.asset(
                                      language['flag'] as String,
                                      width: 28,
                                      height: 28,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(width: 16),
                              // Language name
                              Expanded(
                                child: Text(
                                  language['localName'] as String,
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                    color: isSelected ? Theme.of(context).primaryColor : Colors.black87,
                                  ),
                                ),
                              ),
                              // Selection indicator
                              if (isSelected)
                                Icon(
                                  Icons.check_circle,
                                  color: Theme.of(context).primaryColor,
                                  size: 24,
                                )
                              else
                                Container(
                                  width: 24,
                                  height: 24,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    border: Border.all(
                                      color: Colors.grey.withOpacity(0.3),
                                      width: 2,
                                    ),
                                  ),
                                ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}