import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_wallet/generated/l10n.dart';
import 'package:flutter_wallet/tools/YSColors.dart';
import 'package:flutter_wallet/tools/YSTools.dart';
import 'package:skeletons/skeletons.dart';

import '../login/view/YSHelpView.dart';
import '../shop/YSShop.dart';

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

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

class YSExchangeState extends State<YSExchange> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: YSColors.backgroundColor(context),
      body: GestureDetector(
        onTap: (){
          FocusScope.of(context).unfocus();
        },
        behavior: HitTestBehavior.opaque,
        child: SingleChildScrollView(
          child: SizedBox(
            width: ysWidth(context),
            height: ysHeight(context)-ystabBarHeight,
            child: Skeleton(
              isLoading: false,
              skeleton: SizedBox(
                width: ysWidth(context),
                height: ysHeight(context)-ystabBarHeight,
                child: Stack(
                  children: [
                    Container(
                      height: hsp(300),
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20)),
                        color: Colors.grey,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: hsp(320)),
                      child: Column(
                        children: [
                          Container(
                            height: hsp(25),
                            margin: EdgeInsets.only(left: hsp(20),right: hsp(20)),
                            child: ListView.separated(
                              itemBuilder: (context,index){
                                return SkeletonAvatar( style: SkeletonAvatarStyle(width: (ysWidth(context)-hsp(130))/4, height: 25,borderRadius: const BorderRadius.all(Radius.circular(50))));
                              },
                              separatorBuilder: (context,index){
                                return Container(width: hsp(30),);
                              },
                              itemCount: 4,
                              scrollDirection: Axis.horizontal,
                            ),
                          ),
                          Padding(
                              padding: EdgeInsets.only(top: hsp(20)),
                              child: SkeletonAvatar( style: SkeletonAvatarStyle(width: ysWidth(context)-hsp(40), height: hsp(50)))
                          ),
                          Padding(
                            padding: EdgeInsets.all(hsp(20)),
                            child: SkeletonAvatar(
                              style: SkeletonAvatarStyle(
                                  width: double.infinity,
                                  height: hsp(100)
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              child: Stack(
                children: [
                  const YSHeadView(),
                  Padding(
                    padding: EdgeInsets.only(top: ysTOP(context)+hsp(10),left: hsp(20),right: hsp(20)),
                    child: LayoutBuilder(
                      builder: (context,conSize){
                        return Column(
                          children: [
                            Container(
                              height: hsp(30),
                              margin: EdgeInsets.only(left: hsp(30),right: hsp(30)),
                              child: Text(S.current.DUIHUAN,style: YSColors.title2Style(context),),
                            ),
                            Container(
                              height: conSize.maxHeight-hsp(30),
                              padding: EdgeInsets.only(top: hsp(20)),
                              child:  YSChangeView(key: changeKey,),
                            )
                          ],
                        );
                      },
                    ),
                  ),
                  GestureDetector(
                    onTap: (){
                      changeKey.currentState?.change();
                    },
                    child: Padding(
                      padding: EdgeInsets.only(top: ysTOP(context)+hsp(145),left: ysWidth(context)/2-hsp(25)),
                      child: Transform.rotate(angle: 1.55,child: Image.asset(YSColors.imageStyle(context, '交换  反向'),height: hsp(50),width: hsp(50),),)
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}