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: GestureDetector(
                      onTap: () {
                        Navigator.pop(context, true);
                      },
                      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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}