import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class TestPage extends StatelessWidget {
  const TestPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset(
          Assets.imagesTestBg,
          width: 375.w,
          fit: BoxFit.cover,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: PageAppbar(title: "人格类型测试", color: Colors.white, backgroundColor: Colors.transparent,),
          body: Container(
            width: 375.w,
            padding: EdgeInsets.symmetric(
              vertical: 40.w,
              horizontal: 12.w
            ),
            child: Column(
              children: [
                Container(
                  width: 350.w,
                  padding: EdgeInsets.all(30.w),
                  margin: EdgeInsets.only(bottom: 5.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(16.w)),
                    color: const Color.fromRGBO(39, 48, 89, 1)
                  ),
                  child: Center(
                    child: Text(
                      "在陌生环境中，你通常会在陌生环境中，你通常会在陌生环境中，你通常会",
                      style: TextStyle(
                        fontSize: 16.w,
                        color: Colors.white
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 350.w,
                  margin: EdgeInsets.only(bottom: 5.w),
                  padding: EdgeInsets.only(
                      top: 10.w,
                    right: 10.w,
                    bottom: 5.w,
                    left: 10.w
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(16.w)),
                    color: const Color.fromRGBO(0, 0, 0, .5)
                  ),
                  child: Column(
                    children: [
                      Container(
                        width: 330.w,
                        height: 35.w,
                        margin: EdgeInsets.only(bottom: 5.w),
                        padding: EdgeInsets.symmetric(horizontal: 24.w),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(35.w)),
                          color: const Color.fromRGBO(255, 255, 255, .1)
                        ),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "A.主动与人交流",
                          style: TextStyle(
                            fontSize: 14.w,
                            color: Colors.white
                          ),
                        ),
                      ),
                      Container(
                        width: 330.w,
                        height: 35.w,
                        margin: EdgeInsets.only(bottom: 5.w),
                        padding: EdgeInsets.symmetric(horizontal: 24.w),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(35.w)),
                            color: const Color.fromRGBO(255, 255, 255, .1)
                        ),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "A.主动与人交流",
                          style: TextStyle(
                              fontSize: 14.w,
                              color: Colors.white
                          ),
                        ),
                      ),
                      Container(
                        width: 330.w,
                        height: 35.w,
                        margin: EdgeInsets.only(bottom: 5.w),
                        padding: EdgeInsets.symmetric(horizontal: 24.w),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(35.w)),
                            color: const Color.fromRGBO(255, 255, 255, .1)
                        ),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "A.主动与人交流",
                          style: TextStyle(
                              fontSize: 14.w,
                              color: Colors.white
                          ),
                        ),
                      ),
                      Container(
                        width: 330.w,
                        height: 35.w,
                        margin: EdgeInsets.only(bottom: 5.w),
                        padding: EdgeInsets.symmetric(horizontal: 24.w),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(35.w)),
                            color: const Color.fromRGBO(255, 255, 255, .1)
                        ),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "A.主动与人交流",
                          style: TextStyle(
                              fontSize: 14.w,
                              color: Colors.white
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                TDProgress(
                  type: TDProgressType.linear,
                  value: 0.5,
                  strokeWidth: 6,
                  color: const Color.fromRGBO(117, 98, 249, 1),
                  progressLabelPosition: TDProgressLabelPosition.right,
                  label: TDTextLabel(
                    "5/25",
                    style: TextStyle(
                      color: Colors.white
                    ),
                  ),
                ),
                SizedBox(height: 5.w,),
                Text(
                  "注：本测试仅用于人格偏好探索与自我了解，不代表任何心理学诊断或专业评估。",
                  style: TextStyle(
                    fontSize: 12.w,
                    color: const Color.fromRGBO(255, 255, 255, .5 )
                  ),
                ),
                Spacer(),
                Container(
                  width: 350.w,
                  height: 45.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(45.w)),
                    color: const Color.fromRGBO(117, 98, 249, 1),
                  ),
                  child: Center(
                    child: Text(
                      "查看结果",
                      style: TextStyle(
                        fontSize: 19.w,
                        color: Colors.white
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        )
      ],
    );
  }
}