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

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

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

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

    return Scaffold(
      backgroundColor: AppNewColors.whiteBackGround,
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 179),
            SvgPicture.asset(
              "assets/images/New/GlobeHemisphereEast.svg",
              width: 61.75,
              height: 61.75,
              color: const Color(0xFF7B4CFF),
            ),
            const SizedBox(height: 31),
            const Txt(
              text: "قم باختيار لغتك المفضلة",
              style: TextStyle(
                color: AppNewColors.titleTextColor,
                fontSize: 20,
                fontFamily: 'Readex_Pro',
                fontWeight: FontWeight.w600,
                height: 1.23,
              ),
            ),
            const SizedBox(height: 12),
            const Txt(
              text: "Choose your default language",
              style: TextStyle(
                color: AppNewColors.titleTextColor,
                fontSize: 20,
                fontFamily: 'Inter',
                fontWeight: FontWeight.w600,
                height: 1.23,
              ),
            ),
            const SizedBox(height: 32),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Directionality(
                textDirection: TextDirection.ltr,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const SizedBox(height: 40),
                    // English
                    _buildLangOption(
                      context,
                      langCode: Language.en,
                      text: "English",
                      asset: "assets/images/New/FlagsEN.svg",
                      isSelected: lp.currentLangCode == Language.en,
                    ),
                    const SizedBox(height: 20),
                    // French
                    _buildLangOption(
                      context,
                      langCode: Language.fr,
                      text: "Français",
                      asset: "assets/images/New/FlagsFR.svg",
                      isSelected: lp.currentLangCode == Language.fr,
                    ),
                    const SizedBox(height: 20),
                    // Arabic
                    _buildLangOption(
                      context,
                      langCode: Language.ar,
                      text: "عربي",
                      asset: "assets/images/New/FlagTN.svg",
                      isSelected: lp.currentLangCode == Language.ar,
                    ),
                  ],
                ),
              ),
            ),
            const Spacer(),
            const Column(
              children: [
                Txt(
                  text: "يمكنك تغيير اللغة لاحقا من الإعدادات",
                  style: TextStyle(
                    color: AppNewColors.titleTextColor,
                    fontSize: 12,
                    fontFamily: 'Readex_Pro',
                    fontWeight: FontWeight.w600,
                    height: 1.20,
                  ),
                ),
                SizedBox(height: 12),
                Txt(
                  text: "You can change language later from settings",
                  style: TextStyle(
                    color: AppNewColors.titleTextColor,
                    fontSize: 12,
                    fontFamily: 'Inter',
                    fontWeight: FontWeight.w600,
                    height: 1.33,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }

  Widget _buildLangOption(
    BuildContext context, {
    required Language langCode,
    required String text,
    required String asset,
    required bool isSelected,
  }) {
    final lp = context.read<LanguageProvider>();

    return GestureDetector(
        onTap: () {
          lp.setDropValue(
            langCode == Language.en
                ? "English"
                : langCode == Language.fr
                    ? "French"
                    : "Arabic",
          );
          // Print selected language
          print("Selected language: $text");
          Get.offAll(() => const LoginScreen());
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 115,
              height: 100,
              padding: const EdgeInsets.all(16),
              clipBehavior: Clip.antiAlias,
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                  side: BorderSide(
                    width: 1,
                    color: isSelected
                        ? AppNewColors.primaryColor
                        : Colors.black.withOpacity(0.12),
                  ),
                  borderRadius: BorderRadius.circular(16),
                ),
                shadows: const [
                  BoxShadow(
                    color: Color(0x0C121217),
                    blurRadius: 6,
                    offset: Offset(0, 4),
                    spreadRadius: -2,
                  ),
                  BoxShadow(
                    color: Color(0x14121217),
                    blurRadius: 15,
                    offset: Offset(0, 10),
                    spreadRadius: -3,
                  )
                ],
              ),
              child: Column(
                children: [
                  SizedBox(
                    width: double.infinity,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SvgPicture.asset(asset, width: 32, height: 32),
                        const SizedBox(
                          height: 12,
                        ),
                        Txt(
                          text: text,
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            color: AppNewColors.titleTextColor,
                            fontSize: 16,
                            fontFamily: 'Inter',
                            fontWeight: FontWeight.w600,
                            height: 1.50,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}