import 'dart:async';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/app_state.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/user_models/country.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/utils/utils.dart';
import 'package:mc_common_app/view_models/user_view_model.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:mc_common_app/widgets/txt_field.dart';
import 'package:provider/provider.dart';

class AddPhoneNumWidget extends StatefulWidget {
  const AddPhoneNumWidget({Key? key}) : super(key: key);

  @override
  State<AddPhoneNumWidget> createState() => _AddPhoneNumWidgetState();
}

class _AddPhoneNumWidgetState extends State<AddPhoneNumWidget> {
  String phoneNum = "", countryCode = "";
  DropValue? countryCodeVal;
  late UserVM userVM;
  Country? _country;

  @override
  void initState() {
    super.initState();
    scheduleMicrotask(() {
      userVM = Provider.of(context, listen: false);
      getCountryList();
    });
  }

  getCountryList() async {
    _country = await userVM.getAllCountries();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            "Enter Phone Number".toText(fontSize: 16, isBold: true),
            8.height,
            Container(
              decoration: Utils.containerColorRadiusBorderWidth(MyColors.white, 0, MyColors.darkPrimaryColor, 2),
              margin: const EdgeInsets.all(0),
              padding: const EdgeInsets.only(left: 8, right: 8),
              width: null,
              child: Row(
                children: [
                  if (countryCode.isEmpty) ...[
                    LocaleKeys.selectCountryCode.tr().toText(color: borderColor, fontSize: 15, fontWeight: MyFonts.Medium).paddingOnly(top: 12, bottom: 12),
                  ] else ...[
                    countryCode.toText(fontSize: 15, fontWeight: MyFonts.Medium).paddingOnly(top: 12, bottom: 12),
                  ]
                ],
              ),
            ).onPress(() {
              if (_country != null) {
                getCountry(context);
              }
            }),
            8.height,
            TxtField(
              keyboardType: TextInputType.phone,
              hint: "546758594",
              value: phoneNum,
              isSidePaddingZero: true,
              onChanged: (v) {
                phoneNum = v;
              },
            ),
            16.height,
            Row(
              children: [
                Expanded(
                  child: ShowFillButton(
                    title: "Cancel",
                    backgroundColor: MyColors.greyButtonColor,
                    txtColor: Colors.black,
                    onPressed: () {
                      pop(context);
                    },
                  ),
                ),
                12.width,
                Expanded(
                  child: ShowFillButton(
                    title: LocaleKeys.sendOTP.tr(),
                    onPressed: () {
                      //User Role: Dealer|Manager for a branch
                      FocusScope.of(context).unfocus();
                      if (validation()) {
                        userVM.performBasicOtpRegisterPage(context, countryCode: countryCode, phoneNum: phoneNum, role: 7, isNeedToPassToken: true, reloadPage: () {
                          pop(context);
                        });
                      }
                    },
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  void getCountry(BuildContext context) {
    List<DropValue> dropList = [];
    _country!.data?.forEach((element) {
      dropList.add(DropValue(element.id ?? 0, "${element.countryName ?? ""} ${element.countryCode ?? ""}", element.countryCode ?? ""));
    });
    return showCustomBottomPicker(
        items: dropList,
        onItemSelected: (value) {
          AppState().setUserRegisterCountrySelection = value;
          countryCode = value.subValue;
          countryCodeVal = value;
          setState(() {});
        },
        context: context);
  }

  bool validation() {
    bool isValid = true;
    if (countryCode.isEmpty) {
      Utils.showToast(LocaleKeys.selectCountryCode.tr());
      //("Please select Country Code");
      isValid = false;
    } else if (phoneNum.isEmpty) {
      Utils.showToast(LocaleKeys.addPhoneNo.tr());
      //("Please add Phone No");
      isValid = false;
    }
    return isValid;
  }
}

class CustomBottomPicker extends StatelessWidget {
  final List<DropValue> items;
  final void Function(DropValue selectedItem) onItemSelected;

  const CustomBottomPicker({
    Key? key,
    required this.items,
    required this.onItemSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: Container(
        color: Colors.black.withOpacity(0.4),
        child: DraggableScrollableSheet(
          initialChildSize: 0.2,
          maxChildSize: 0.4,
          minChildSize: 0.2,
          expand: true,
          builder: (context, scrollController) {
            return Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
              ),
              child: ListView.builder(
                controller: scrollController,
                itemCount: items.length,
                shrinkWrap: true,
                physics: const AlwaysScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(items[index].value),
                    onTap: () {
                      onItemSelected(items[index]);
                      Navigator.of(context).pop();
                    },
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

// Function to show the bottom picker
void showCustomBottomPicker({
  required BuildContext context,
  required List<DropValue> items,
  required void Function(DropValue selectedItem) onItemSelected,
}) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    isDismissible: false,
    backgroundColor: Colors.transparent,
    builder: (context) {
      return CustomBottomPicker(
        items: items,
        onItemSelected: onItemSelected,
      );
    },
  );
}
