import 'dart:developer';
import 'dart:math' as math;
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';

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

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

    return Material(
      color: Colors.transparent,
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: lp.dropValue,
          dropdownColor: Colors.white,
          isExpanded: true,
          icon: Padding(
            padding:
                const EdgeInsetsDirectional.only(start: 25), // ← directional
            child: Transform.rotate(
              // This is the key change: rotate the icon in RTL
              angle: isArabic ? math.pi : 0,
              child: SvgPicture.asset(
                'assets/icons/arrowright.svg', // Asset can now be a simple right arrow
                width: 12,
                height: 12,
                color: Colors
                    .black, // consider using colorScheme for theme adaptability
              ),
            ),
          ),
          alignment: AlignmentDirectional.centerEnd,
          onChanged: (v) => lp.setDropValue(v!),
          items: const ['English', 'French', 'Arabic']
              .map((value) => DropdownMenuItem(
                    value: value,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SvgPicture.asset(
                          value == 'Arabic'
                              ? 'assets/images/ksa.svg'
                              : value == 'French'
                                  ? 'assets/images/fr.svg'
                                  : 'assets/images/usa.svg',
                          width: 30,
                          height: 25,
                        ),
                        const SizedBox(width: 8),
                        Text(
                          value == 'English'
                              ? 'English'
                              : value == 'French'
                                  ? 'Français'
                                  : 'عربي',
                          style: const TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                  ))
              .toList(),
        ),
      ),
    );
  }
}