import 'dart:io';

import 'package:driver/constant/constant.dart';
import 'package:driver/controllers/edit_profile_controller.dart';
import 'package:driver/models/zone_model.dart';
import 'package:driver/themes/app_them_data.dart';
import 'package:driver/themes/responsive.dart';
import 'package:driver/themes/text_field_widget.dart';
import 'package:driver/themes/theme_controller.dart';
import 'package:driver/utils/network_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

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

  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();
    final isDark = themeController.isDark.value;
    return GetX(
        init: EditProfileController(),
        builder: (controller) {
          return Scaffold(
            appBar: AppBar(
              backgroundColor: isDark ? AppThemeData.grey900 : AppThemeData.grey50,
              centerTitle: false,
              titleSpacing: 0,
              title: Text(
                "Edit Profile".tr,
                style: TextStyle(color: isDark ? AppThemeData.grey50 : AppThemeData.grey900, fontSize: 18, fontFamily: AppThemeData.medium),
              ),
            ),
            body: controller.isLoading.value
                ? Constant.loader()
                : SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Center(
                            child: Stack(
                              children: [
                                controller.profileImage.isEmpty
                                    ? ClipRRect(
                                        borderRadius: BorderRadius.circular(60),
                                        child: Image.asset(
                                          Constant.userPlaceHolder,
                                          height: Responsive.width(24, context),
                                          width: Responsive.width(24, context),
                                          fit: BoxFit.cover,
                                        ),
                                      )
                                    : Constant().hasValidUrl(controller.profileImage.value) == false
                                        ? ClipRRect(
                                            borderRadius: BorderRadius.circular(60),
                                            child: Image.file(
                                              File(controller.profileImage.value),
                                              height: Responsive.width(24, context),
                                              width: Responsive.width(24, context),
                                              fit: BoxFit.cover,
                                            ),
                                          )
                                        : ClipRRect(
                                            borderRadius: BorderRadius.circular(60),
                                            child: NetworkImageWidget(
                                              fit: BoxFit.cover,
                                              imageUrl: controller.userModel.value.profilePictureURL.toString(),
                                              height: Responsive.width(24, context),
                                              width: Responsive.width(24, context),
                                            ),
                                          ),
                                Positioned(
                                    bottom: 0,
                                    right: 0,
                                    child: InkWell(
                                        onTap: () {
                                          buildBottomSheet(context, controller);
                                        },
                                        child: SvgPicture.asset("assets/icons/ic_edit.svg")))
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 40,
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: TextFieldWidget(
                                  title: 'First Name'.tr,
                                  controller: controller.firstNameController.value,
                                  hintText: 'First Name'.tr,
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              Expanded(
                                child: TextFieldWidget(
                                  title: 'Last Name'.tr,
                                  controller: controller.lastNameController.value,
                                  hintText: 'Last Name'.tr,
                                ),
                              ),
                            ],
                          ),
                          TextFieldWidget(
                            title: 'Email'.tr,
                            textInputType: TextInputType.emailAddress,
                            controller: controller.emailController.value,
                            hintText: 'Email'.tr,
                            enable: false,
                          ),
                          TextFieldWidget(
                            title: 'Phone Number'.tr,
                            textInputType: TextInputType.emailAddress,
                            controller: controller.phoneNumberController.value,
                            hintText: 'Phone Number'.tr,
                            enable: false,
                          ),
                          controller.userModel.value.isOwner == true ||
                                 ( controller.userModel.value.vendorID != null && controller.userModel.value.vendorID!.isNotEmpty)
                              ? SizedBox()
                              : Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text("Zone".tr,
                                        style: TextStyle(
                                            fontFamily: AppThemeData.semiBold,
                                            fontSize: 14,
                                            color: isDark ? AppThemeData.grey100 : AppThemeData.grey800)),
                                    const SizedBox(
                                      height: 5,
                                    ),
                                    DropdownButtonFormField<ZoneModel>(
                                        hint: Text(
                                          'Select zone'.tr,
                                          style: TextStyle(
                                            fontSize: 14,
                                            color: isDark ? AppThemeData.grey700 : AppThemeData.grey700,
                                            fontFamily: AppThemeData.regular,
                                          ),
                                        ),
                                        icon: const Icon(Icons.keyboard_arrow_down),
                                        dropdownColor: isDark ? AppThemeData.grey900 : AppThemeData.grey50,
                                        decoration: InputDecoration(
                                          errorStyle: const TextStyle(color: Colors.red),
                                          isDense: true,
                                          filled: true,
                                          enabled:
                                              controller.userModel.value.ownerId != null && controller.userModel.value.ownerId!.isNotEmpty
                                                  ? false
                                                  : true,
                                          fillColor: isDark ? AppThemeData.grey900 : AppThemeData.grey50,
                                          disabledBorder: OutlineInputBorder(
                                            borderRadius: const BorderRadius.all(Radius.circular(10)),
                                            borderSide:
                                                BorderSide(color: isDark ? AppThemeData.primary300 : AppThemeData.primary300, width: 1),
                                          ),
                                          focusedBorder: OutlineInputBorder(
                                            borderRadius: const BorderRadius.all(Radius.circular(10)),
                                            borderSide:
                                                BorderSide(color: isDark ? AppThemeData.primary300 : AppThemeData.primary300, width: 1),
                                          ),
                                          enabledBorder: OutlineInputBorder(
                                            borderRadius: const BorderRadius.all(Radius.circular(10)),
                                            borderSide: BorderSide(color: isDark ? AppThemeData.grey900 : AppThemeData.grey50, width: 1),
                                          ),
                                          errorBorder: OutlineInputBorder(
                                            borderRadius: const BorderRadius.all(Radius.circular(10)),
                                            borderSide: BorderSide(color: isDark ? AppThemeData.grey900 : AppThemeData.grey50, width: 1),
                                          ),
                                          border: OutlineInputBorder(
                                            borderRadius: const BorderRadius.all(Radius.circular(10)),
                                            borderSide: BorderSide(color: isDark ? AppThemeData.grey900 : AppThemeData.grey50, width: 1),
                                          ),
                                        ),
                                        initialValue: controller.selectedZone.value.id == null ? null : controller.selectedZone.value,
                                        onChanged:
                                            controller.userModel.value.ownerId != null && controller.userModel.value.ownerId!.isNotEmpty
                                                ? null
                                                : (value) {
                                                    controller.selectedZone.value = value!;
                                                    controller.update();
                                                  },
                                        style: TextStyle(
                                            fontSize: 14,
                                            color: isDark ? AppThemeData.grey50 : AppThemeData.grey900,
                                            fontFamily: AppThemeData.medium),
                                        items: controller.zoneList.map((item) {
                                          return DropdownMenuItem<ZoneModel>(
                                            value: item,
                                            child: Text(
                                              item.name.toString(),
                                              style: TextStyle(
                                                  fontSize: 14,
                                                  color: isDark ? AppThemeData.grey50 : AppThemeData.grey900,
                                                  fontFamily: AppThemeData.medium),
                                            ),
                                          );
                                        }).toList()),
                                  ],
                                ),
                        ],
                      ),
                    ),
                  ),
            bottomNavigationBar: InkWell(
              onTap: () async {
                controller.saveData();
              },
              child: Container(
                color: AppThemeData.primary300,
                width: Responsive.width(100, context),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  child: Text(
                    "Save".tr,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: isDark ? AppThemeData.grey50 : AppThemeData.grey50,
                      fontSize: 16,
                      fontFamily: AppThemeData.medium,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }

  Future buildBottomSheet(BuildContext context, EditProfileController controller) {
    return showModalBottomSheet(
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return SizedBox(
              height: Responsive.height(22, context),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 15),
                    child: Text("please select".tr,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        )),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            IconButton(
                                onPressed: () => controller.pickFile(source: ImageSource.camera),
                                icon: const Icon(
                                  Icons.camera_alt,
                                  size: 32,
                                )),
                            Padding(
                              padding: const EdgeInsets.only(top: 3),
                              child: Text(
                                "camera".tr,
                                style: const TextStyle(),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            IconButton(
                              onPressed: () => controller.pickFile(source: ImageSource.gallery),
                              icon: const Icon(
                                Icons.photo_library_sharp,
                                size: 32,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 3),
                              child: Text(
                                "gallery".tr,
                                style: const TextStyle(),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}
