import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../app.dart';

final Widget divider = SizedBox(height: 10.h);

final ddTxtStyle = new TextStyle(
  color: ThemeColor.black,
  fontWeight: FontWeight.w400,
  fontSize: 14.sp,
);

class AddAddressDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<AddressController>(
      init: AddressController(),
      builder: (ac) => AlertDialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(8.0),
          ),
        ),
        titlePadding: EdgeInsets.zero,
        scrollable: true,
        title: Container(
          padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
          decoration: new BoxDecoration(
            color: ThemeColor.color3A3A3A,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
            ),
          ),
          child: Row(
            children: [
              Text(
                'add_address'.tr,
                style: new TextStyle(
                  color: ThemeColor.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Spacer(),
              GestureDetector(
                onTap: Get.back,
                child: Icon(
                  Icons.close,
                  color: ThemeColor.white,
                  size: 18.sp,
                ),
              ),
            ],
          ),
        ),
        contentPadding: const EdgeInsets.all(16),
        insetPadding: EdgeInsets.zero,
        content: Builder(
          builder: (context) {
            final width = 1.sw - 70;
            return Container(
              width: width > 0 ? width : 1.sw,
              child: Form(
                key: ac.addressForm,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('name'.tr, style: AppTheme.styleColorC4C4),
                            divider,
                            SizedBox(
                              width: 0.38.sw,
                              child: MyTextFormField(
                                controller: ac.nameCtrl,
                                label: 'name'.tr,
                              ),
                            ),
                          ],
                        ),
                        Spacer(),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('surname'.tr, style: AppTheme.styleColorC4C4),
                            divider,
                            SizedBox(
                              width: 0.38.sw,
                              child: MyTextFormField(
                                controller: ac.surnameCtrl,
                                label: 'surname'.tr,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    AppTheme.appSizeDivider20H,
                    Text('phone_number'.tr, style: AppTheme.styleColorC4C4),
                    divider,
                    MyTextFormField(
                      inputFormatters: [maskFormatterPhone],
                      controller: ac.phoneCtrl,
                      prefixTxt: '+993',
                      label: 'phone_number'.tr,
                    ),
                    AppTheme.appSizeDivider20H,

                    //--------------------- begin dropdown ------------------------
                    Text(
                      'select_state'.tr,
                      style: AppTheme.styleColorC4C4,
                    ),
                    SizedBox(height: 15.h),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      decoration: ShapeDecoration(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: ThemeColor.colorC4C4C4),
                          borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        ),
                      ),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButton<StateModel>(
                          isExpanded: true,
                          borderRadius: BorderRadius.circular(16),
                          value: ac.selectedState.value,
                          style: ddTxtStyle,
                          items: ac.states.map((StateModel value) {
                            return DropdownMenuItem<StateModel>(
                              value: value,
                              child: Text(
                                value.translations.firstWhere((state) => state.locale == ac.locale).defaultName,
                                style: ddTxtStyle,
                              ),
                            );
                          }).toList(),
                          onChanged: (newValue) => ac.onStateChange(newValue),
                        ),
                      ),
                    ),
                    //--------------------- end dropdown ------------------------

                    AppTheme.appSizeDivider20H,
                    Text('city'.tr, style: AppTheme.styleColorC4C4),
                    divider,
                    MyTextFormField(
                      controller: ac.cityCtrl,
                      label: 'city'.tr,
                    ),
                    // Row(
                    //   children: [
                    //     Column(
                    //       crossAxisAlignment: CrossAxisAlignment.start,
                    //       children: [
                    //         Text('city'.tr, style: AppTheme.styleColorC4C4),
                    //         divider,
                    //         SizedBox(
                    //           width: 0.38.sw,
                    //           child: MyTextFormField(
                    //             controller: ac.cityCtrl,
                    //             label: 'city'.tr,
                    //           ),
                    //         ),
                    //       ],
                    //     ),
                    //     Spacer(),
                    //     Column(
                    //       crossAxisAlignment: CrossAxisAlignment.start,
                    //       children: [
                    //         Text('state'.tr, style: AppTheme.styleColorC4C4),
                    //         divider,
                    //         SizedBox(
                    //           width: 0.38.sw,
                    //           child: MyTextFormField(
                    //             controller: ac.stateCtrl,
                    //             label: 'state'.tr,
                    //           ),
                    //         ),
                    //       ],
                    //     ),
                    //   ],
                    // ),
                    AppTheme.appSizeDivider20H,
                    Text('address'.tr, style: AppTheme.styleColorC4C4),
                    divider,
                    MyTextFormField(
                      maxLines: 2,
                      controller: ac.addressCtrl,
                      label: 'address'.tr,
                    ),
                    AppTheme.appSizeDivider30H,
                    ac.isAddingLoading.value
                        ? CustomLoader()
                        : ColoredButton(
                            title: 'send'.tr,
                            callback: ac.createAddress,
                            btnColor: ThemeColor.mainColor,
                          ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
