import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:skillcourt/game_session_model.dart';
import 'package:skillcourt/pages/home.dart';
import 'package:skillcourt/pages/statistics.dart';

class ConfigPage extends StatefulWidget {
  static const routeName = 'configuration';

  const ConfigPage({super.key});

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

class _ConfigPageState extends State<ConfigPage> {
  @override
  Widget build(BuildContext context) {
    return Consumer<GameSessionModel>(
      builder: (context, gameSessionModel, _) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Container(
              padding: const EdgeInsets.only(left: 25),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(
                    height: 50,
                  ),
                  const Text(
                    'Settings',
                    style: TextStyle(
                      color: Color(0xFF323438),
                      fontSize: 44,
                      fontFamily: 'Product Sans',
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text(
                    'Personalize your Agipad lights:',
                    style: TextStyle(
                      color: Color(0xFF323438),
                      fontSize: 20,
                      fontFamily: 'Product Sans',
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  SizedBox(
                    width: 360,
                    height: 100,
                    child: TextButton(
                      style: ButtonStyle(
                        shape:
                        MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        backgroundColor: MaterialStateProperty.all<Color>(
                          const Color(0xFFF5F5F5),
                        ),
                      ),
                      onPressed: () => {},
                      child: Padding(
                        padding: const EdgeInsets.only(left: 15.0),
                        child: Row(
                          children: [
                            Container(
                              width: 80,
                              height: 80,
                              decoration: const BoxDecoration(
                                image: DecorationImage(
                                  scale: 2.0,
                                  image: AssetImage(
                                      'assets/images/color-circle.png'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                            const SizedBox(width: 30),
                            const Flexible(
                              child: Text(
                                'Edit color',
                                style: TextStyle(
                                  color: Color(0xFF323438),
                                  fontSize: 18,
                                  fontFamily: 'Product Sans',
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  SizedBox(
                    width: 360,
                    height: 100,
                    child: TextButton(
                      style: ButtonStyle(
                        shape:
                        MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        backgroundColor: MaterialStateProperty.all<Color>(
                          const Color(0xFFF5F5F5),
                        ),
                      ),
                      onPressed: () => {},
                      child: Padding(
                        padding: const EdgeInsets.only(left: 15.0),
                        child: Row(
                          children: [
                            Container(
                              width: 80,
                              height: 80,
                              decoration: const BoxDecoration(
                                image: DecorationImage(
                                  scale: 2.0,
                                  image: AssetImage('assets/images/sun.png'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                            const SizedBox(width: 30),
                            const Flexible(
                              child: Text(
                                'Edit brightness',
                                style: TextStyle(
                                  color: Color(0xFF323438),
                                  fontSize: 18,
                                  fontFamily: 'Product Sans',
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Container(
                    width: 360,
                    height: 150,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white,
                        border: Border.all(
                            width: 3,
                            color: const Color.fromARGB(255, 222, 222, 222))),
                    child: Padding(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const SizedBox(
                            height: 10,
                          ),
                          const Padding(
                            padding: EdgeInsets.all(5),
                            child: Text(
                              'Got questions?',
                              style: TextStyle(
                                color: Color(0xFF323438),
                                fontSize: 25,
                                fontFamily: 'Product Sans',
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          const SizedBox(width: 10),
                          const Padding(
                            padding: EdgeInsets.all(5),
                            child: Flexible(
                              child: Text(
                                'We got answers! Check out the FAQ.',
                                style: TextStyle(
                                  color: Color(0xFF323438),
                                  fontSize: 18,
                                  fontFamily: 'Product Sans',
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          SizedBox(
                            width: 120,
                            height: 40,
                            child: TextButton(
                              style: ButtonStyle(
                                shape: MaterialStateProperty.all<
                                    RoundedRectangleBorder>(
                                  RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                // Color(0xFF323438)
                                backgroundColor:
                                MaterialStateProperty.all<Color>(
                                  const Color(0xFF323438),
                                ),
                              ),
                              onPressed: () => {},
                              child: const Text(
                                'FAQ',
                                style: TextStyle(
                                  color: Color(0xFFF5F5F5),
                                  fontSize: 18,
                                  fontFamily: 'Product Sans',
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  SizedBox(
                    width: 360,
                    height: 50,
                    child: TextButton(
                      style: ButtonStyle(
                        shape:
                        MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        backgroundColor: MaterialStateProperty.all<Color>(
                          const Color(0xFFF5F5F5),
                        ),
                      ),
                      onPressed: () => {},
                      child: Padding(
                        padding: const EdgeInsets.only(left: 15.0),
                        child: Row(
                          children: [
                            const SizedBox(width: 10),
                            const Flexible(
                              child: Text(
                                'Send feedback',
                                style: TextStyle(
                                  color: Color(0xFF323438),
                                  fontSize: 18,
                                  fontFamily: 'Product Sans',
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ),
                            const SizedBox(width: 165),
                            Container(
                              width: 30,
                              height: 30,
                              decoration: const BoxDecoration(
                                image: DecorationImage(
                                  scale: 2.0,
                                  image: AssetImage('assets/images/send.png'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              )),
          bottomNavigationBar: Material(
            elevation: 8.0,
            shadowColor: const Color(0x3F000000),
            child: Container(
              height: 96,
              decoration: const BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Color(0x3F000000),
                    blurRadius: 16,
                    offset: Offset(0, -6),
                    spreadRadius: 0,
                  ),
                ],
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        icon: Image.asset('assets/images/Home_icon.png'),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const HomePage(),
                            ),
                          );
                        },
                      ),
                      const Text(
                        'Home',
                        style: TextStyle(
                          color: Color(0xFF323438),
                          fontSize: 14,
                          fontFamily: 'Product Sans',
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        icon: Image.asset('assets/images/Stats_icon.png'),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const StatisticsPage(),
                            ),
                          );
                        },
                      ),
                      const Text(
                        'My stats',
                        style: TextStyle(
                          color: Color(0xFF323438),
                          fontSize: 14,
                          fontFamily: 'Product Sans',
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        icon: Image.asset('assets/images/Settings_icon.png'),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const ConfigPage(),
                            ),
                          );
                        },
                      ),
                      const Text(
                        'Settings',
                        style: TextStyle(
                          color: Color(0xFF323438),
                          fontSize: 14,
                          fontFamily: 'Product Sans',
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}
