import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';
import 'package:skillcourt/pages/random_game_mode_by_hits.dart';

class RandomGameMode extends StatefulWidget {
  static const routeName = 'RandomGameMode';

  const RandomGameMode({Key? key}) : super(key: key);

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

class _RandomGameMode extends State<RandomGameMode> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Create Game'),
      ),
      body: timer(),
      resizeToAvoidBottomInset: false,
    );
  }

  int min = 0;
  int sec = 0;

  Widget timer() {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Padding(
                  padding: EdgeInsets.only(
                    top: 0.0,
                  ),
                  child: Text(
                    'By Hits',
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Switch(
              value: isSwitched,
              onChanged: (value) {
                setState(() {
                  isSwitched = value;
                });
                Navigator.pushReplacementNamed(
                    context, RandomGameModeByHits.routeName);
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ),
          Expanded(
            flex: 3,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Padding(
                      padding: EdgeInsets.only(
                        bottom: 19.0,
                      ),
                      child: Text(
                        'Minutes',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    NumberPicker(
                      minValue: 0,
                      maxValue: 59,
                      value: min,
                      onChanged: (value) {
                        setState(() => min = value);
                      },
                    ),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    const Padding(
                      padding: EdgeInsets.only(
                        bottom: 0.0,
                      ),
                      child: Text(
                        'Seconds',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    NumberPicker(
                      minValue: 0,
                      maxValue: 59,
                      value: sec,
                      onChanged: (value) {
                        setState(() => sec = value);
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
          const Expanded(
              flex: 1,
              child: TextField(
                decoration: InputDecoration(
                    hintText: 'Please type a number',
                    labelText: 'Pad Light Up',
                    labelStyle: TextStyle(
                      fontSize: 12.0,
                      color: Colors.green,
                    )),
                keyboardType: TextInputType.number,
              )),
          const Expanded(
              flex: 1,
              child: TextField(
                decoration: InputDecoration(
                    hintText: 'Please type a number',
                    labelText: 'Pad Light Delay',
                    labelStyle: TextStyle(
                      fontSize: 12.0,
                      color: Colors.green,
                    )),
                keyboardType: TextInputType.number,
              )),
          Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('PLAY GAME'),
              )),
        ],
      ),
    );
  }
}
