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/submitBtn.dart';
import '../../../tools/titleAppBar.dart';
import '../../../translations/trans_lib.dart';

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

  @override
  State<ValueAddedServicesHighFunctionPage> createState() => _ValueAddedServicesHighFunctionPageState();
}

class _ValueAddedServicesHighFunctionPageState extends State<ValueAddedServicesHighFunctionPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: TitleAppBar(barTitle:TranslationLoader.lanKeys!.advancedFunction!.tr, haveBack:true, iconColor: Colors.black, titleColor: Colors.black, backgroundColor: Colors.white),
        body:Column(
          children: [
            Expanded(
              child: ListView(
                children: [
                  _topShowState(),
                  _benefitsContent(),
                  Container(height: 20.h, color: const Color(0xFFF5F5F5)),
                  _buyNotes(),
                ],
              ),
            ),
            _bottomBtn(),
          ],
        )
    );
  }

  Widget _topShowState(){
    return Container(
      height: 150.h,
      margin: EdgeInsets.only(left: 30.w, top: 20.h, right: 30.w),
      padding: EdgeInsets.only(left: 30.w),
      decoration: BoxDecoration(
        color: const Color(0xFFDFE6ED),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.h),
          topRight: Radius.circular(30.h),
        ),
      ),
      child: Stack(
        alignment: AlignmentDirectional.centerStart,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            // crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("${TranslationLoader.lanKeys!.currentState!.tr}:${TranslationLoader.lanKeys!.haveNotOpened!.tr}", style: TextStyle(fontSize: 32.sp, fontWeight: FontWeight.w600),),
                  SizedBox(height: 5.h),
                  Text("${TranslationLoader.lanKeys!.periodValidity!.tr}:2023-07-29", style: TextStyle(fontSize: 30.sp, fontWeight: FontWeight.w600),),
                ],//
              ),
            ],
          ),
          Positioned(
              bottom: 0.h,
              right: 0.w,
              child: Container(
                width: 120.w,
                height: 60.h,
                decoration: BoxDecoration(
                  color: const Color(0xFFBDCDDF),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30.h),
                    bottomLeft: Radius.circular(30.h),
                  ),
                ),
                child: Center(child: Text(TranslationLoader.lanKeys!.record!.tr)),
              )
          ),
        ],
      ),
    );
  }

  Widget _benefitsContent(){
    return Column(
      children: [
        Container(
          // color: Colors.red,
          margin: EdgeInsets.only(left: 30.w, top: 50.h, right: 30.w),
          padding: EdgeInsets.only(left: 30.w),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('images/mine/icon_mine_highFunctionContent_left.png', width: 40.w, height: 40.w),
                SizedBox(width: 10.w,),
                Expanded(
                  child: Text(TranslationLoader.lanKeys!.advancedFeaturesAndBenefitsContent!.tr, textAlign: TextAlign.center,style: TextStyle(fontSize: 36.sp, fontWeight: FontWeight.w600)),
                ),
                SizedBox(width: 10.w,),
                Image.asset('images/mine/icon_mine_highFunctionContent_right.png', width: 40.w, height: 40.w)
              ]
          ),
        ),
        SizedBox(height: 10.h,),
        Container(
          height: 1.sw,
          child: GridView.count(
            padding: EdgeInsets.all(10.h),
            crossAxisCount: 3,
            mainAxisSpacing: 10.h,
            crossAxisSpacing: 10.h,
            // childAspectRatio: 1 / 0.5,
            physics: const NeverScrollableScrollPhysics(),
            children: [
              _buildItem("images/mine/icon_mine_highFunctionContent_dxmb.png", TranslationLoader.lanKeys!.smsTemplate!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_yjmb.png", TranslationLoader.lanKeys!.emailTemplate!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_sqgly.png", TranslationLoader.lanKeys!.authorizedAdmin!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_sfz.png", TranslationLoader.lanKeys!.lockGroup!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_bjft.png", TranslationLoader.lanKeys!.sendGroupKey!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_bjft.png", TranslationLoader.lanKeys!.markedHouseState!.tr),
              _buildItem("images/mine/icon_mine_highFunctionContent_fkgj.png", TranslationLoader.lanKeys!.cardIssuingtool!.tr),
            ],
          ),
        ),
      ],
    );
  }

  Container _buildItem(String img, String title) {
    return Container(
      margin: EdgeInsets.all(10.h),
      padding: EdgeInsets.only(top: 30.h),
      decoration: BoxDecoration(
        color: const Color(0xFFF7F7FA),
        borderRadius: BorderRadius.all(Radius.circular(20.h)),
        // border: Border.all(width: 0.5.w, color: Colors.black)
      ),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              width: 90.w,
              height: 90.w,
              child: Image.asset(img)
          ),
          SizedBox(height: 10.h,),
          Column(
            children: [
              Text(title, style: TextStyle(fontSize: 32.sp), textAlign: TextAlign.center,),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buyNotes(){
    return Column(
      children: [
        Container(
          // color: Colors.red,
          margin: EdgeInsets.only(left: 30.w, top: 50.h, right: 30.w),
          padding: EdgeInsets.only(left: 30.w),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('images/mine/icon_mine_highFunctionContent_left.png', width: 40.w, height: 40.w),
                SizedBox(width: 10.w,),
                Expanded(child: Text(TranslationLoader.lanKeys!.titleForBuyingAdvancedFeatures!.tr, textAlign: TextAlign.center, style: TextStyle(fontSize: 36.sp, fontWeight: FontWeight.w600))),
                SizedBox(width: 10.w,),
                Image.asset('images/mine/icon_mine_highFunctionContent_right.png', width: 40.w, height: 40.w)
              ]
          ),
        ),
        SizedBox(height: 20.h),
        Container(
          margin: EdgeInsets.only(left: 25.w, right: 25.w),
          decoration: BoxDecoration(
            color: const Color(0xFFF5F5F5),
            borderRadius: BorderRadius.circular(10.h),
          ),
          child: Padding(
              padding: EdgeInsets.only(left: 30.w, top: 30.h, right: 30.w, bottom: 30.h),
              child: Text(TranslationLoader.lanKeys!.tipsForBuyingAdvancedFeatures!.tr)),
        ),
        SizedBox(height: 20.h),
      ],
    );
  }

  Widget _bottomBtn(){
    return Container(
      margin: EdgeInsets.only(top: 30.h, bottom: 30.h),
      child: Row(
        children: [
          Visibility(
            child: Container(
              height: 100.h,
              width: (1.sw-20.w*3)/2,
              margin: EdgeInsets.only(left: 20.w),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(width: 3.w, color: const Color(0xFF000635)),
                borderRadius: BorderRadius.circular(50.h),
              ),
              child: Center(child: Text(TranslationLoader.lanKeys!.freeTrial!.tr, style: TextStyle(fontSize: 34.sp),)),
            ),
          ),
          GestureDetector(
            onTap: (){
              Navigator.pushNamed(context, Routers.valueAddedServicesBuyPage, arguments: 4);
            },
            child: Container(
              height: 100.h,
              width: (1.sw-20.w*3)/2,
              // width: 1.sw-20.w*2,
              margin: EdgeInsets.only(left: 20.w, right: 20.w),
              decoration: BoxDecoration(
                color: const Color(0xFF424658),
                border: Border.all(width: 1, color: AppColors.mainColor),
                borderRadius: BorderRadius.circular(50.h),
              ),
              child: Center(child: Text(TranslationLoader.lanKeys!.openNow!.tr, style: TextStyle(fontSize: 34.sp, color: const Color(0xFFF9CEAC)),)),
            ),
          ),
        ],
      ),
    );
  }
}