import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:skillcourt/pages/play_setup/play_setup.dart';

class GameLength extends StatefulWidget {
  const GameLength(
      {super.key,
      required this.numOfHitsSelected,
      required this.minutesSelected,
      required this.secondsSelected,
      this.currentMinutes,
      this.currentSeconds,
      this.currentHits,
      required this.byHits,
      required this.hitsSwitch,
      this.onTap});

  final Function(int?) numOfHitsSelected;
  final Function(int?) minutesSelected;
  final Function(int?) secondsSelected;
  final Function(bool?) hitsSwitch;
  final int? currentMinutes;
  final int? currentSeconds;
  final int? currentHits;
  final bool byHits;
  final Function()? onTap;

  @override
  State<GameLength> createState() => _GameLengthState();
}

class _GameLengthState extends State<GameLength> {
  late bool byHits;
  late CarouselController _minutesController;
  late CarouselController _secondsController;
  late CarouselController _hitsController;

  @override
  void initState() {
    super.initState();
    byHits = widget.byHits;
    _minutesController = CarouselController();
    _secondsController = CarouselController();
    _hitsController = CarouselController();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> seconds = [
      for (int i = 0; i <= 30; i++) timeButton(i, "Seconds")
    ];
    List<Widget> minutes = [
      for (int i = 0; i <= 30; i++) timeButton(i, "Minutes")
    ];
    List<Widget> padHits = [
      for (int i = 0; i <= 30; i++) timeButton(i, "Pad Hits")
    ];

    return Column(
      children: [
        Header(
            icon: Icons.restart_alt_outlined,
            onPressed: () {
              PlaySetUp.playSetUpItem.gameLength = null;
              setState(() {
                _minutesController.jumpToPage(0);
                _secondsController.jumpToPage(0);
                _hitsController.jumpToPage(0);
                widget.hitsSwitch(null);
                widget.minutesSelected(null);
                widget.secondsSelected(null);
                widget.numOfHitsSelected(null);
              });
            }),
        Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Set a time limit or a pad hit limit'),
          ),
        ),
        PlaySettingButton(
            title: 'Game length',
            icon: Icons.timer_sharp,
            selection: 'Set',
            unit: PlaySetUp.playSetUpItem.gameLength == null ? null : '',
            onTap: widget.onTap),
        Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(children: [
              Divider(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text("Number Of Hits"),
                  Switch(
                      value: byHits,
                      onChanged: (value) {
                        setState(() {
                          byHits = value;
                        });
                        widget.hitsSwitch(value);
                      })
                ],
              ),
              Divider(),
              if (!byHits) byTime(minutes, seconds) else byNumOfHits(padHits)
            ])),
      ],
    );
  }

  Widget byTime(List<Widget> minutes, List<Widget> seconds) {
    return Column(
      children: [
        const Divider(),
        SizedBox(
          height: 100,
          width: 300,
          child: CarouselSlider(
            carouselController: _minutesController,
            items: minutes,
            options: CarouselOptions(
              initialPage: widget.currentMinutes ?? 0,
              enlargeCenterPage: true,
              viewportFraction: 0.4,
              onPageChanged: (index, carousel) {
                widget.minutesSelected(index);
              },
            ),
          ),
        ),
        const Divider(),
        Text("Minutes"),
        Icon(Icons.add),
        const Divider(),
        SizedBox(
          height: 100,
          width: 300,
          child: CarouselSlider(
            carouselController: _secondsController,
            items: seconds,
            options: CarouselOptions(
              initialPage: widget.currentSeconds ?? 0,
              enlargeCenterPage: true,
              viewportFraction: 0.4,
              onPageChanged: (index, carousel) {
                widget.secondsSelected(index);
              },
            ),
          ),
        ),
        const Divider(),
        Text("Seconds"),
      ],
    );
  }

  Widget byNumOfHits(List<Widget> padHits) {
    return Column(
      children: [
        const Divider(),
        SizedBox(
          height: 100,
          width: 300,
          child: CarouselSlider(
            carouselController: _hitsController,
            items: padHits,
            options: CarouselOptions(
              initialPage: widget.currentHits ?? 0,
              enlargeCenterPage: true,
              viewportFraction: 0.4,
              onPageChanged: (index, carousel) {
                widget.numOfHitsSelected(index);
              },
            ),
          ),
        ),
        const Divider(),
        Text("Pad hits"),
      ],
    );
  }

  Widget timeButton(int value, String description) {
    return SizedBox(
      width: 100,
      height: 50,
      child: Card(
        elevation: 1.5,
        child: Center(
          child: Text(
            value < 10 ? '0$value' : '$value',
            textAlign: TextAlign.center,
            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
          ),
        ),
      ),
    );
  }
}

class GameLengthSettingButton extends StatelessWidget {
  const GameLengthSettingButton({
    super.key,
    required this.title,
    required this.icon,
    this.function,
    this.selection,
  });

  final String title;
  final IconData icon;
  final Function()? function;
  final dynamic selection;

  @override
  Widget build(BuildContext context) {
    bool contentFilled = selection != null;
    return InkWell(
      onTap: function,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stack(
          children: [
            if (contentFilled)
              Container(
                height: 130.0,
                decoration: BoxDecoration(
                  color: const Color(0xFFD9D128),
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: SizedBox(
                  child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 25.0),
                        child: Text(
                          '$selection',
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 20),
                        ),
                      )),
                ),
              ),
            Container(
              height: 65.0,
              decoration: BoxDecoration(
                color: const Color(0xFFDEDEDE),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      const SizedBox(
                        width: 10,
                      ),
                      // SvgPicture.asset(assetName),
                      Icon(icon),
                      Padding(
                        padding: const EdgeInsets.only(left: 16.0),
                        child: Text(
                          title,
                          semanticsLabel: title,
                          style: const TextStyle(
                            fontFamily: 'Product Sans',
                            fontSize: 24.0,
                            color: Color(0xFF323438),
                          ),
                        ),
                      ),
                    ],
                  ),
                  if (contentFilled)
                    const SizedBox()
                  else
                    Card(
                      elevation: 0,
                      color: const Color(0xFFD9D128),
                      child: SizedBox(
                        width: 10,
                        height: 65,
                        child: Center(
                            child: Text(
                          contentFilled ? '$selection' : '',
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 20),
                        )),
                      ),
                    )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
