import 'package:cs_resources/constants/color_constants.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:plugin_basic/base/base_stateless_page.dart';
import 'package:plugin_basic/service/app_config_service.dart';
import 'package:plugin_basic/utils/ext_get_nav.dart';
import 'package:router/path/router_path.dart';
import 'package:shared/utils/screen_util.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';

import 'select_country_controller.dart';

class SelectCountryPage extends BaseStatelessPage<SelectCountryController> {
  SelectCountryPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance() {
    return Get.start(RouterPath.authSelectCountry);
  }

  @override
  void initState() {
  }

  @override
  SelectCountryController createRawController() {
    return SelectCountryController();
  }

  @override
  Widget buildWidget(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: true,
        top: false,
        child: Container(
          width: double.infinity,
          height: double.infinity,
          padding: EdgeInsets.only(top: ScreenUtil.getStatusBarH(context)),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xFF091D44),
                Color(0xFF245A8A),
                Color(0xFF7F7CEC),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 底部滚动的布局
              SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  physics: const BouncingScrollPhysics(),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      MyTextView(
                        "Casual Labour System",
                        textColor: ColorConstants.white,
                        isFontBold: true,
                        fontSize: 35,
                        marginTop: 20,
                        fontStyle: FontStyle.italic,
                        textAlign: TextAlign.center,
                        marginLeft: 50,
                        marginRight: 50,
                      ),
                      MyTextView(
                        "Select Country".tr,
                        textColor: ColorConstants.white,
                        isFontMedium: true,
                        fontSize: 21,
                        marginTop: 18,
                      ),
                      MyTextView(
                        "Browse jobs available in your selected country.".tr,
                        textColor: ColorConstants.white,
                        isFontMedium: true,
                        fontSize: 14,
                        marginTop: 9,
                      ),

                      //新加坡的选项
                      Container(
                        width: double.infinity,
                        margin: const EdgeInsets.only(top: 48, left: 20, right: 20),
                        padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 17),
                        decoration: BoxDecoration(
                          color: const Color(0xFF4DCFF6).withOpacity(0.2), // 设置背景颜色和不透明度
                          borderRadius: BorderRadius.circular(5.0), // 设置圆角
                        ),
                        child: Row(
                          children: [
                            const MyAssetImage(Assets.cptAuthSgIcon, width: 50, height: 33),
                            MyTextView(
                              "Singapore".tr,
                              marginLeft: 17,
                              textColor: ColorConstants.white,
                              isFontMedium: true,
                              fontSize: 18,
                            ).expanded(),
                            Obx(() {
                              return Visibility(
                                visible: ConfigService.to.selectCountry.value == 1,
                                child: const MyAssetImage(Assets.cptAuthCheckedIcon, width: 22, height: 22),
                              );
                            }),
                          ],
                        ),
                      ).onTap(() {
                        ConfigService.to.selectCountry.value = 1;
                      }),

                      //越南的选项
                      Container(
                        width: double.infinity,
                        margin: const EdgeInsets.only(top: 13.5, left: 20, right: 20),
                        padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 17),
                        decoration: BoxDecoration(
                          color: const Color(0xFF4DCFF6).withOpacity(0.2), // 设置背景颜色和不透明度
                          borderRadius: BorderRadius.circular(5.0), // 设置圆角
                        ),
                        child: Row(
                          children: [
                            const MyAssetImage(Assets.cptAuthVnIcon, width: 50, height: 33),
                            MyTextView(
                              "Vietnam".tr,
                              marginLeft: 17,
                              textColor: ColorConstants.white,
                              isFontMedium: true,
                              fontSize: 18,
                            ).expanded(),
                            Obx(() {
                              return Visibility(
                                visible: ConfigService.to.selectCountry.value == 0,
                                child: const MyAssetImage(Assets.cptAuthCheckedIcon, width: 22, height: 22),
                              );
                            }),
                          ],
                        ),
                      ).onTap(() {
                        ConfigService.to.selectCountry.value = 0;
                      }),

                      //韩国的选项
                      // Container(
                      //   width: double.infinity,
                      //   margin: const EdgeInsets.only(top: 13.5, left: 20, right: 20),
                      //   padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 17),
                      //   decoration: BoxDecoration(
                      //     color: const Color(0xFF4DCFF6).withOpacity(0.2), // 设置背景颜色和不透明度
                      //     borderRadius: BorderRadius.circular(5.0), // 设置圆角
                      //   ),
                      //   child: Row(
                      //     children: [
                      //       const MyAssetImage(Assets.cptAuthKoreaIcon, width: 50, height: 33),
                      //       MyTextView(
                      //         "Korea".tr,
                      //         marginLeft: 17,
                      //         textColor: ColorConstants.white,
                      //         isFontMedium: true,
                      //         fontSize: 18,
                      //       ).expanded(),
                      //       Obx(() {
                      //         return Visibility(
                      //           visible: ConfigService.to.selectCountry.value == 2,
                      //           child: const MyAssetImage(Assets.cptAuthCheckedIcon, width: 22, height: 22),
                      //         );
                      //       }),
                      //     ],
                      //   ),
                      // ).onTap(() {
                      //   ConfigService.to.selectCountry.value = 2;
                      // }),

                      //Next按钮
                      Stack(
                        children: [
                          MyButton(
                            type: ClickType.throttle,
                            milliseconds: 500,
                            onPressed: () {
                              controller.setupNext();
                            },
                            text: "Next".tr,
                            textColor: ColorConstants.white,
                            fontSize: 18,
                            minHeight: 50,
                            radius: 22.5,
                            backgroundColor: hexToColor("#FFBB1B"),
                            fontWeight: FontWeight.w500,
                          ),
                          const Positioned(
                            right: 28,
                            top: 0,
                            bottom: 0,
                            child: MyAssetImage(Assets.cptAuthNextIcon, width: 20, height: 14.5),
                          ),
                        ],
                      ).marginSymmetric(horizontal: 20, vertical: 36)
                    ],
                  )).expanded(),
            ],
          ),
        ),
      ),
    );
  }
}