import 'dart:io';

import 'package:wanisclient/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';

import '../../../config/custom_text.dart';
import '../../../config/language/language_enum.dart';
import '../../../providers/language_provider.dart';
import '../../../widgets/custom_button.dart';
import 'ReviewProfilePicture.dart';

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

  @override
  State<AddProfilePicture> createState() => _AddProfilePictureState();
}

class _AddProfilePictureState extends State<AddProfilePicture> {
  File? _pickedImage;

  Future<void> _pickImage(imageSource) async {
    final picker = ImagePicker();
    final pickedFile =
        await picker.pickImage(source: imageSource); //ImageSource.gallery

    if (pickedFile != null) {
      final File imageFile = File(pickedFile.path);
      // Navigate to the ReviewProfilePicture screen and pass the image file
      // Note: 'context' must be available in this method's scope.
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => ReviewProfilePicture(imageFile: imageFile),
        ),
      );
      // final File imageFile = File(pickedFile.path);
      //
      // final prefs = await SharedPreferences.getInstance();
      // String token = prefs.getString('token')!;
      //
      // bool success =
      // await utill.uploadProfileImage(imageFile, pickedFile.name, token);
      // await Provider.of<AuthProvider>(context, listen: false).fetchProfile();
      //
      // if (success) {
      //   setState(() {
      //     _pickedImage = imageFile;
      //   });
      // } else {
      //   print("Upload failed, not updating _pickedImage.");
      // }
    }
  }

  @override
  Widget build(BuildContext context) {
    final languageProvider =
        context.watch<LanguageProvider>(); // Watch for changes
    bool isArabic = languageProvider.currentLangCode == Language.ar;
    return Scaffold(
      backgroundColor: AppNewColors.whiteBackGround,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 10),
              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,
                  ),
                ),
              ),
              const SizedBox(height: 24),
              // Title
              Txt(
                text: "Add a Profile Picture",
                style: TextStyle(
                  color: AppNewColors.titleTextColor,
                  fontSize: 26,
                  fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                  fontWeight: FontWeight.w600,
                  height: 1.23,
                ),
              ),
              const SizedBox(height: 12),
              // Description
              Txt(
                text:
                    "Help drivers or riders identify you more easily, this increases trust.",
                style: TextStyle(
                  color: AppNewColors.inputTextColor,
                  fontSize: 18,
                  fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                  fontWeight: FontWeight.w500,
                  height: 1.33,
                ),
              ),
              const SizedBox(height: 32),
              Txt(
                text: "Please follow these guidelines for easy recognition.",
                style: TextStyle(
                  color: const Color(0xFF031B1C),
                  fontSize: 16,
                  fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                  fontWeight: FontWeight.w600,
                  height: 1.50,
                ),
              ),

              const SizedBox(height: 28),
              gideRow(isArabic, 'assets/images/New/face.svg',
                  "Clearly show your face"),
              const SizedBox(height: 12),
              gideRow(isArabic, 'assets/images/New/NoSunglasses.svg',
                  "No sunglasses"),
              const SizedBox(height: 12),
              gideRow(isArabic, 'assets/images/New/NoHeadCovering.svg',
                  "No head covering"),

              const SizedBox(height: 24),
              CustomButton(
                onClick: () {
                  _pickImage(ImageSource.camera);
                },
                fontSize: 14,
                width: double.infinity,
                height: 40,
                borderRadius: 10,
                txtColor: AppNewColors.white,
                title: 'take_a_selfie',
                backgroundColor: AppNewColors.primaryBtnColor,
                borderColor: AppNewColors.primaryBtnColor,
              ),
              const SizedBox(height: 12),
              CustomButton(
                onClick: () {
                  _pickImage(ImageSource.gallery);
                },
                fontSize: 14,
                width: double.infinity,
                height: 40,
                borderRadius: 10,
                txtColor: AppNewColors.primaryBtnColor,
                title: 'choose_from_library',
                backgroundColor: AppNewColors.primaryLoginColor,
                borderColor: AppNewColors.primaryLoginColor,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget gideRow(isArabic, svg, text) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SvgPicture.asset(
          svg,
        ),
        const SizedBox(width: 16),
        Txt(
          text: text,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: const Color(0xFF5B616D),
            fontSize: 16,
            fontFamily: isArabic ? "Readex_Pro" : 'Inter',
            fontWeight: FontWeight.w500,
            height: 1.50,
          ),
        ),
      ],
    );
  }
}