import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_wallet/generated/l10n.dart';
import 'package:flutter_wallet/login/YSLoginAuth.dart';

import '../tools/YSColors.dart';
import '../tools/YSTools.dart';

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

  @override
  YSGuideState createState() => YSGuideState();
}

class YSGuideState extends State<YSGuide> {
  @override
  Widget build(BuildContext context) {
    List array = [
      {'image':'y1','content1':'重新定义安全·比安全更安全·比省心更省心','content2':'Web3入口；安全守护，与您一起探索新世界'},
      {'image':'y2','content1':'专属管家·安全守护','content2':'管理-存储-发送-接收数字资产'},
      {'image':'y3','content1':'WEB3.0-您的私人保险柜','content2':'交易-兑换-畅游Web3.0','tips':'私密且安全-匿名交易资产'}
    ];
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        padding: EdgeInsets.only(top: ysTOP(context)+hsp(20),left: hsp(15),right: hsp(15)),
        width: ysWidth(context),
        height: ysHeight(context),
        child: Column(
          children: [
            Expanded(child: Swiper(
              itemCount: array.length,
              itemBuilder: (context,index){
                Map item = array[index];
                return Column(
                  children: [
                    Image.asset(
                      YSColors.imageStyle(context, '资源 3'),
                      width: hsp(150),
                      height: hsp(30),
                      color: Colors.white,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: hsp(20),bottom: hsp(50)),
                      child: RichText(
                        text: TextSpan(
                          style: TextStyle(fontSize: zsp(14),color: Colors.white60),
                          text: item['content1'],
                          children: [
                            if(item['tips']!=null)TextSpan(
                              text: '\n${item['tips']}',
                              style: TextStyle(fontSize: zsp(10),color: Colors.white60)
                            )
                          ]
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Image.asset(YSColors.imageStyle(context, item['image']),height: hsp(300),),
                    Padding(
                      padding: EdgeInsets.only(top: hsp(50)),
                      child: Text(item['content2'],style: TextStyle(fontSize: zsp(14),color: Colors.white60),)
                    )
                  ],
                );
              },
              pagination: SwiperPagination(
                margin: EdgeInsets.only(bottom: hsp(50)),
                builder: SwiperCustomPagination(
                  builder: (BuildContext context, SwiperPluginConfig config) {
                    return Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text('${config.activeIndex+1}/${config.itemCount}',style: TextStyle(fontSize: zsp(18),color: Colors.white),),
                        Container(
                          width: hsp(80),
                          height: hsp(10),
                          margin: EdgeInsets.only(top: hsp(10)),
                          child: ListView.separated(
                            itemBuilder: (context,index){
                              return Container(
                                height: hsp(10),
                                width: hsp(config.activeIndex==index?30:10),
                                decoration: const BoxDecoration(//config.activeIndex==index?Colors.white:
                                  color: Colors.white60,
                                  borderRadius: BorderRadius.all(Radius.circular(50))
                                ),
                              );
                            },
                            separatorBuilder: (context,index){
                              return SizedBox(width: hsp(15),);
                            },
                            itemCount: array.length,
                            padding: const EdgeInsets.all(0),
                            scrollDirection: Axis.horizontal,
                            physics: const NeverScrollableScrollPhysics(),
                          ),
                        )
                      ],
                    );
                  })
              ),
            )),
            GestureDetector(
              onTap: (){
                YSSharedPreferences.setStringValue('install', '1');
                Navigator.of(context).pushAndRemoveUntil(CupertinoPageRoute(builder: (context){
                  return const YSLoginAuth();
                }), (route) => false);
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                margin: EdgeInsets.only(bottom: hsp(30)),
                height: hsp(45),
                width: hsp(230),
                decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(5))
                ),
                alignment: Alignment.center,
                child: Text(S.current.KAISHISHIYONG,style: TextStyle(fontSize: zsp(18),color: Colors.black,fontWeight: FontWeight.bold),),
              ),
            )
          ],
        ),
      ),
    );
  }
}
