import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:my_flutter_puzzle/utils/extensions/context_extension.dart';
import 'package:my_flutter_puzzle/utils/extensions/string_extensions.dart';

class LoseScreen extends StatefulWidget {
  final int move;
  final int tiles;

  const LoseScreen({
    Key? key,
    required this.tiles,
    required this.move,
  }) : super(key: key);

  @override
  State<LoseScreen> createState() => _LoseScreenState();
}

class _LoseScreenState extends State<LoseScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffA7A7A7),
      body: SizedBox(
        width: context.width,
        height: context.height,
        child: Stack(
          alignment: AlignmentDirectional.centerEnd,
          children: [
            Center(
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  Container(
                    width: context.width * 267 / 812,
                    height: context.height * 284 / 375,
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(
                        colors: [
                          Color(0xffB9B9B9),
                          Color(0xffD1D1D1),
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      ),
                      borderRadius: BorderRadius.circular(36),
                    ),
                    child: Column(
                      children: [
                        const SizedBox(height: 31),
                        const Text(
                          'Opsssss !',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 24),
                        Container(
                          width: context.width * 114 / 812,
                          height: context.width * 114 / 812,
                          decoration: BoxDecoration(
                            color: const Color(0xffC0C0C0),
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: const Color(0xff7a7a7a),
                              width: 1,
                            ),
                          ),
                          child: Container(
                            margin: EdgeInsets.all(context.width * 20 / 812),
                            padding: EdgeInsets.all(context.width * 20 / 812),
                            decoration: const BoxDecoration(
                              color: Color(0xffE02020),
                              shape: BoxShape.circle,
                            ),
                            child: SvgPicture.asset(
                              'sad'.svgPath,
                              colorFilter: const ColorFilter.mode(
                                Colors.white,
                                BlendMode.srcIn,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(height: 19),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Row(
                              children: [
                                const Text(
                                  'Tiles',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 13,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(width: 9),
                                Text(
                                  '${widget.tiles}',
                                  style: const TextStyle(
                                    decoration: TextDecoration.underline,
                                    color: Colors.white,
                                    fontSize: 13,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(width: 42),
                            Row(
                              children: [
                                const Text(
                                  'Move',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 13,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(width: 9),
                                Text(
                                  '${widget.move}',
                                  style: const TextStyle(
                                    decoration: TextDecoration.underline,
                                    color: Colors.white,
                                    fontSize: 13,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Transform.translate(
                    offset: const Offset(0, 20),
                    child: Container(
                      width: context.width * 147 / 812,
                      height: context.height * 51 / 375,
                      padding: const EdgeInsets.all(3),
                      decoration: BoxDecoration(
                        color: const Color(0xff979797).withOpacity(0.12),
                        borderRadius: BorderRadius.circular(36),
                      ),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(31),
                          gradient: const LinearGradient(
                            colors: [
                              Color(0xffFFC600),
                              Color(0xffFF5A00),
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const SizedBox(width: 6),
                            Container(
                              width: context.width * 26 / 540,
                              height: context.width * 26 / 540,
                              padding: const EdgeInsets.all(9),
                              margin: const EdgeInsets.symmetric(vertical: 3),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  color: Colors.white,
                                  width: 1,
                                ),
                                gradient: const LinearGradient(
                                  colors: [
                                    Colors.white,
                                    Color(0xffD5D5D5),
                                  ],
                                  begin: Alignment.topCenter,
                                  end: Alignment.bottomCenter,
                                ),
                                shape: BoxShape.circle,
                              ),
                              child: SvgPicture.asset('refresh'.svgPath),
                            ),
                            const SizedBox(width: 8),
                            const Text(
                              'Restart',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(width: 14),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsetsDirectional.only(end: context.width * 68 / 812),
              width: context.width * 142 / 812,
              height: context.height * 280 / 375,
              child: Image(
                image: AssetImage('avatar'.pngPath),
              ),
            ),
          ],
        ),
      ),
    );
  }
}