import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:my_flutter_puzzle/screens/level_list/cubit/level_list_cubit.dart';
import 'package:my_flutter_puzzle/screens/puzzle/puzzle_starter_screen.dart';
import 'package:my_flutter_puzzle/utils/extensions/context_extension.dart';
import 'package:my_flutter_puzzle/utils/extensions/string_extensions.dart';
import 'package:repositories/level_box_domain/model/level_model.dart';

class WinScreen extends StatefulWidget {
  final int move;
  final int tiles;
  final int level;

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

  @override
  State<WinScreen> createState() => _WinScreenState();
}

class _WinScreenState extends State<WinScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff4400CE),
      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(0xff6236FF),
                          Color(0xff4706CC),
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      ),
                      borderRadius: BorderRadius.circular(36),
                    ),
                    child: Column(
                      children: [
                        const SizedBox(height: 31),
                        const Text(
                          'Well done !',
                          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(
                            gradient: const LinearGradient(
                              colors: [
                                Color(0xff6236FF),
                                Color(0xff4824CB),
                              ],
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                            ),
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: const Color(0xff6136FE),
                              width: 1,
                            ),
                          ),
                          child: Container(
                            margin: EdgeInsets.all(context.width * 20 / 812),
                            padding: EdgeInsets.all(context.width * 20 / 812),
                            decoration: const BoxDecoration(
                              color: Color(0xff6DD400),
                              shape: BoxShape.circle,
                            ),
                            child: SvgPicture.asset(
                              'check'.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: _openNextLevel,
                      child: Container(
                        width: context.width * 160 / 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 * 31 / 540,
                                height: context.width * 31 / 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('next_level'.svgPath),
                              ),
                              const SizedBox(width: 8),
                              const Text(
                                'Next level',
                                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),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _openNextLevel() {
    int currentLevel = BlocProvider.of<LevelListCubit>(context).currentLevel;
    if (currentLevel == 8) {
      // all levels are done
      Navigator.popUntil(context, ModalRoute.withName('/'));
    } else {
      Level level = BlocProvider.of<LevelListCubit>(context).getLevel();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) {
            return PuzzleStarterScreen(
              duration: level.duration,
              puzzleSize: level.puzzleSize,
              image: level.image,
              level: level.level,
            );
          },
        ),
      );
    }
  }
}