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

import './widgets/add_address_form.dart';
import '../../../app.dart';

class AddressList extends StatelessWidget {
  final String title;
  final bool isSelectable;
  final Function(AddressModel) callback;
  AddressList({
    Key? key,
    required this.title,
    required this.isSelectable,
    required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetX<AddressController>(
      init: AddressController(),
      builder: (ac) => ac.isLoading.value
          ? CustomLoader()
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(this.title, style: AppTheme.headerStyle),
                // AppTheme.appSizeDivider20H,
                SizedBox(height: 10),
                AppTheme.appColorDivider,
                SizedBox(height: 10.h),
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16),
                  decoration: new BoxDecoration(
                    border: Border.all(
                      color: ThemeColor.mainColor,
                      // width: 2,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: InkWell(
                    onTap: () {
                      ac.setUserInfo();
                      Get.dialog(
                        AddAddressDialog(),
                      );
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.add_circle_outline,
                          size: 22.sp,
                          color: ThemeColor.mainColor,
                        ),
                        SizedBox(width: 12),
                        Text(
                          'add_address'.tr,
                          style: new TextStyle(
                            color: ThemeColor.mainColor,
                            fontSize: 14.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                ListView.separated(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    final address = ac.addresses[index];
                    return InkWell(
                      onTap: () {}, //() => callback(address),
                      child: AnimatedContainer(
                        duration: Duration(milliseconds: 400),
                        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                        decoration: new BoxDecoration(
                          border: Border.all(
                            color: address.isDefault ? ThemeColor.mainColor : Colors.grey.withOpacity(0.50),
                          ),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text('address'.tr + ' №${index + 1}'),
                                Spacer(),
                                isSelectable
                                    ? RoundCheckBox(
                                        isChecked: address.isDefault,
                                        size: 18.h,
                                        onTap: (selected) => callback(address),
                                        checkedColor: Colors.white, // ThemeColor.mainColor,
                                        checkedWidget: Icon(
                                          Icons.circle,
                                          color: ThemeColor.mainColor,
                                          size: 10.h,
                                        ),
                                        border: Border.all(
                                          width: 2,
                                          color: address.isDefault ? Colors.red : Colors.grey.withOpacity(0.50),
                                        ),
                                        // uncheckedColor: Colors.red,
                                        // uncheckedWidget: Icon(Icons.close, color: Colors.white),
                                      )
                                    : ClipOval(
                                        child: Material(
                                          color: ThemeColor.white, // Button color
                                          child: InkWell(
                                            splashColor: Theme.of(context).splashColor,
                                            onTap: () => callback(address),
                                            child: SizedBox(
                                              width: 20.w,
                                              height: 20.h,
                                              child: Icon(
                                                Icons.delete_forever,
                                                size: 18.sp,
                                                color: ThemeColor.mainColor,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Text(
                              '${address.stateTranslations.firstWhere((a) => a.locale == ac.locale).defaultName},' +
                                  ' ${address.city}, ' +
                                  address.address1.first,
                              style: _addressTxtStyle,
                            ),
                            SizedBox(height: 5),
                            Text('phone'.tr + ': ${address.phone}', style: _addressTxtStyle),
                          ],
                        ),
                      ),
                    );
                  },
                  separatorBuilder: (context, index) => SizedBox(height: 20.h),
                  itemCount: ac.addresses.length,
                ),
              ],
            ),
    );
  }

  final TextStyle _addressTxtStyle = new TextStyle(
    color: ThemeColor.color3A3A3A,
    fontSize: 12.sp,
  );
}
