import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/controller/mine/add_bankcard_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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


  // 显示头像选择选项
  void _showAvatarOptions(AddBankcardController controller) {
    showCupertinoModalPopup(
      context: Get.context!,
      builder: (context) => CupertinoActionSheet(
        title: const Text('上传银行卡'),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: const Text('拍照'),
            onPressed: () async {
              Navigator.pop(context);
              await controller.handleCameraCapture();
            },
          ),
          CupertinoActionSheetAction(
            child: const Text('从相册选择'),
            onPressed: () async {
              Navigator.pop(context);
              await controller.handleGallerySelection();
            },
          ),
        ],
        cancelButton: CupertinoActionSheetAction(
          child: const Text('取消'),
          isDestructiveAction: true,
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return GetX<AddBankcardController>(
      init: AddBankcardController(),
      builder: (controller){
        return Scaffold(
          appBar: PageAppbar(title: "提现"),
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsetsGeometry.symmetric(
                  horizontal: 28.w,
                  vertical: 16.w
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.only(
                        bottom: 12.w
                    ),
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                width: 1,
                                color: const Color.fromRGBO(238, 238, 238, 1)
                            )
                        )
                    ),
                    child: Row(
                      children: [
                        Text(
                          "添加银行卡",
                          style: TextStyle(
                              fontSize: 14.w,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                  ),
                  addItem(label: "持卡人", child: TextField(
                    controller: controller.usernameController.value,
                    style: TextStyle(
                      fontSize: ScreenUtil().setWidth(13),
                      height: 1,
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 0,
                          horizontal: 0
                      ),
                      hintText: "请输入持卡人姓名",
                      hintStyle: TextStyle(
                          color: Colors.grey
                      ),

                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                      ),
                      // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                    ),
                    onChanged: (value){
                      controller.username.value = value;
                    },
                  )),
                  addItem(label: "卡号", child: TextField(
                    controller: controller.cardNumController.value,
                    keyboardType: TextInputType.number,
                    style: TextStyle(
                        fontSize: ScreenUtil().setWidth(13),
                        height: 1
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 0,
                          horizontal: 0
                      ),
                      hintText: "请输入银行卡号",
                      hintStyle: TextStyle(
                          color: Colors.grey
                      ),

                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                      ),
                      // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                    ),
                    onChanged: (value){
                      controller.cardNum.value = value;
                    },
                  ), icon: Icon(
                    Icons.camera_alt_outlined,
                    size: 20.w,
                    color: const Color.fromRGBO(153, 153, 153, 1),
                  ).onTap((){
                    _showAvatarOptions(controller);
                  })),
                  addItem(label: "所属银行", child: TextField(
                    controller: controller.bankNameController.value,
                    style: TextStyle(
                      fontSize: ScreenUtil().setWidth(13),
                      height: 1,
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 0,
                          horizontal: 0
                      ),
                      hintText: "请输入所属银行",
                      hintStyle: TextStyle(
                          color: Colors.grey
                      ),

                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                      ),
                      // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                    ),
                    onChanged: (value){
                      controller.bankName.value = value;
                    },
                  )),
                  addItem(label: "开户行", child: TextField(
                    controller: controller.openingBankController.value,
                    style: TextStyle(
                      fontSize: ScreenUtil().setWidth(13),
                      height: 1,
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 0,
                          horizontal: 0
                      ),
                      hintText: "请输入开户行",
                      hintStyle: TextStyle(
                          color: Colors.grey
                      ),

                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                      ),
                      // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      ),
                    ),
                    onChanged: (value){
                      controller.openingBank.value = value;
                    },
                  )),
                  SizedBox(height: 40.w,),
                  Container(
                    width: 255.w,
                    height: 42.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(42.w)),
                        color: const Color.fromRGBO(117, 98, 249, 1)
                    ),
                    child: Center(
                      child: Text(
                        "确认添加",
                        style: TextStyle(
                            fontSize: 14.w,
                            color: Colors.white,
                            fontWeight: FontWeight.w500
                        ),
                      ),
                    ),
                  ).onTap((){
                    controller.saveCard();
                  })
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget addItem({required String label, required Widget child, Widget? icon}){
    return Container(
      height: 44.w,
      decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(
                  width: 1,
                  color: const Color.fromRGBO(238, 238, 238, 1)
              )
          )
      ),
      child: Row(
        children: [
          SizedBox(
            width: 66.w,
            child: Text(
              label,
              style: TextStyle(
                  fontSize: 14.w,
                  fontWeight: FontWeight.w500
              ),
            ),
          ),
          Expanded(
              child: child
          ),
          icon ?? SizedBox(),
        ],
      ),
    );
  }
}