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

import '../../../appRouters.dart';
import '../../../app_settings/app_colors.dart';
import '../../../tools/titleAppBar.dart';
import '../../../translations/trans_lib.dart';

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

  @override
  State<ValueAddedServicesBuyPage> createState() => _ValueAddedServicesBuyPageState();
}

class _ValueAddedServicesBuyPageState extends State<ValueAddedServicesBuyPage> {
  final data = ["1", "2", "3", "4", ];

  @override
  Widget build(BuildContext context) {
    var type = ModalRoute.of(context)?.settings.arguments as int;

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(barTitle: _getNavTitle(type), haveBack:true, backgroundColor: AppColors.mainColor),
      body: Column(
        children: [
          Container(
              width: 1.sw,
              // height: 400.h,
              color: Colors.white,
              padding: EdgeInsets.only(left:25.h, right: 25.h, top: 25.h, bottom: 10.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(TranslationLoader.lanKeys!.chooseAPackage!.tr, style: TextStyle(fontSize: 32.sp),),
                ],
              )
          ),
          Expanded(
            child: GridView.count(
              padding: EdgeInsets.all(10.w),
              crossAxisCount: 2,
              mainAxisSpacing: 10.h,
              crossAxisSpacing: 10.w,
              childAspectRatio: 1 / 0.5,
              children: data.map((title) => _buildItem(title)).toList(),
            ),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.only(left:25.h, right: 25.h, top: 25.h, bottom: 10.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(TranslationLoader.lanKeys!.modeOfPayment!.tr, style: TextStyle(fontSize: 32.sp),),
                SizedBox(height: 20.h,),
                Row(
                  children: [
                    Image.asset('images/mine/icon_mine_valueAddedServices_zfb.png', width: 40.w, height: 40.w,),
                    SizedBox(width:20.w),
                    Expanded(child: Text(TranslationLoader.lanKeys!.alipay!.tr, style: TextStyle(fontSize: 28.sp, fontWeight: FontWeight.w500))),
                    SizedBox(width:5.w),
                    Image.asset('images/icon_round_selet.png', width: 40.w, height: 40.w,)
                  ],
                ),
                SizedBox(height: 20.h,),
              ],
            ),
          ),
          Container(height: 10.h, color: const Color(0xFFF5F5F5),),
          Container(
            height: 100.h,
            color: Colors.white,
            child: Row(
              children: [
                SizedBox(width:20.w),
                Expanded(child: Text("￥50", style: TextStyle(fontSize: 36.sp, color: AppColors.mainColor, fontWeight: FontWeight.w500))),
                SizedBox(width:5.w),
                Container(
                    width: 180.w,
                    height: 100.h,
                    color: AppColors.mainColor,
                    child: Center(child: Text(TranslationLoader.lanKeys!.goToPay!.tr, style: TextStyle(fontSize: 32.sp, color: Colors.white, fontWeight: FontWeight.w500)))
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Container _buildItem(String title) {
    return Container(
      margin: EdgeInsets.all(10.w),
      padding: EdgeInsets.only(left:30.w, top: 20.h, bottom: 20.h),
      decoration: BoxDecoration(
          color: title == "1" ? const Color(0xFFEDF1FD):Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(20.h)),
          border: Border.all(width: 0.5.w, color: Colors.black)
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("500条", style: TextStyle(fontSize: 36.sp),),
          SizedBox(height: 10.h),
          Text("￥50 (￥0.08/条)", style: TextStyle(fontSize: 32.sp),),
        ],
      ),
    );
  }

  String _getNavTitle(int type){
    String topTitle = "";
    switch(type){
      case 1:
        topTitle = TranslationLoader.lanKeys!.buySMS!.tr;
        break;
      case 2:
        topTitle = TranslationLoader.lanKeys!.buyMail!.tr;
        break;
      case 3:
        topTitle = TranslationLoader.lanKeys!.buyRealNameAuthenticationTimes!.tr;
        break;
      case 4:
        topTitle = TranslationLoader.lanKeys!.enablingAdvancedFeatures!.tr;
        break;
    }
    return topTitle;
  }
}