import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';

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

class FlipingCard extends StatefulWidget {
  final List<Player> players;
  const FlipingCard({required this.players, super.key});

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

class _FlipingCardState extends State<FlipingCard> {
  int index = 0;

  late FlipCardController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FlipCardController();
  }

  _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: const BoxDecoration(
            color: Color(0xFF006666),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: Text(
                  widget.players[index].name,
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .displayMedium
                      ?.copyWith(color: Colors.white),
                ),
              ),
              Text('Klick um deine Rolle zu sehen!',
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                      color: const Color.fromARGB(255, 202, 202, 202))),
            ],
          ),
        ),
        back: Container(
          decoration: BoxDecoration(
            color: widget.players[index].role != Role.werwolf
                ? const Color(0xFF006666)
                : Color.fromARGB(255, 100, 21, 15),
            borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: Text(
                  widget.players[index].role.stringValue,
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .displaySmall
                      ?.copyWith(color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Werwolf"),
        centerTitle: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(child: _renderContent(context)),
          Container(
            color: const Color.fromARGB(255, 29, 29, 29),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.red,
                    side: const BorderSide(
                      color: Colors.red,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      if (index > 0 && index <= widget.players.length) {
                        index--;
                        if (!_controller.state!.isFront) {
                          _controller.toggleCardWithoutAnimation();
                        }
                      }
                    });
                  },
                  child: const Text("Zurück"),
                ),
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    foregroundColor: const Color.fromARGB(255, 40, 168, 168),
                    side: const BorderSide(
                      color: Color.fromARGB(255, 40, 168, 168),
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      if (index >= 0 && index < widget.players.length - 1) {
                        index++;
                        if (!_controller.state!.isFront) {
                          _controller.toggleCardWithoutAnimation();
                        }
                      }
                    });
                  },
                  child: const Text("Nächster Spieler"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}