import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:werwolf/screens/gameboard.dart';

import '../models/player.dart';
import '../models/role.dart';

// FlipingCard is a StatefulWidget that takes a list of players as input
class FlipingCard extends StatefulWidget {
  final List<Player> players;
  const FlipingCard({required this.players, super.key});

  @override
  State<FlipingCard> createState() => _FlipingCardState();
}

// State class for FlipingCard
class _FlipingCardState extends State<FlipingCard> {
  int index = 0; // Index to keep track of the current player

  late FlipCardController _controller; // Controller for the flip card

  @override
  void initState() {
    super.initState();
    _controller = FlipCardController(); // Initialize the flip card controller
  }

  // Method to render the content of the flip card
  _renderContent(context) {
    return Card(
      elevation: 0.0,
      margin: const EdgeInsets.only(
          left: 15.0, right: 15.0, top: 10.0, bottom: 10.0),
      color: const Color(0x00000000),
      child: FlipCard(
        controller: _controller,
        direction: FlipDirection.HORIZONTAL,
        side: CardSide.FRONT,
        speed: 300,
        onFlipDone: (status) {},
        front: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primary,
            borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: Text(
                  widget.players[index].name,
                  style: Theme.of(context).textTheme.headlineMedium,
                  textAlign: TextAlign.center,
                ),
              ),
              const Text(
                'Click to see your role!',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        back: Container(
          decoration: BoxDecoration(
            color: widget.players[index].role != Role.werwolf
                ? const Color(0xFF006666)
                : const Color.fromARGB(255, 100, 21, 15),
            borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: Text(
                  widget.players[index].role.stringValue,
                  style: Theme.of(context).textTheme.headlineMedium,
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Werwolf"),
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(FontAwesomeIcons.xmark),
          onPressed: () {
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(child: _renderContent(context)),
          const Padding(
            padding: EdgeInsets.all(15.0),
            child: Divider(
              height: 1,
              color: Colors.grey,
            ),
          ),
          Container(
            padding: const EdgeInsets.only(top: 10, bottom: 60),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  child: OutlinedButton(
                    onPressed: () {
                      setState(() {
                        if (index > 0 && index <= widget.players.length) {
                          index--; // Go to the previous player
                          if (!_controller.state!.isFront) {
                            _controller.toggleCardWithoutAnimation();
                          }
                        }
                      });
                    },
                    child: const Text("Back"),
                  ),
                ),
                Flexible(
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        if (index >= 0 && index < widget.players.length - 1) {
                          index++; // Go to the next player
                          if (!_controller.state!.isFront) {
                            _controller.toggleCardWithoutAnimation();
                          }
                        } else if (index == widget.players.length - 1) {
                          // Navigate to the game board if it's the last player
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) =>
                                  PlayerGridView(players: widget.players),
                            ),
                          );
                        }
                      });
                    },
                    child: Text(index != widget.players.length - 1
                        ? "Next Player"
                        : "Start Game!"),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}