import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:huacu_mobile/models/auth_data.dart';
import 'package:huacu_mobile/models/available_game.dart';

class TestingGroundsPage extends StatefulWidget {
  const TestingGroundsPage({super.key});

  @override
  State<TestingGroundsPage> createState() => _TestingGroundsPageState();
}

class _TestingGroundsPageState extends State<TestingGroundsPage> {
  final availableGames = <AvailableGame>[].obs;
  final AuthData authData = const AuthData("123", "nuark", "123");

  @override
  void initState() {
    super.initState();

    availableGames.addAll([
      AvailableGame(
        id: "1234",
        opponentName: "nuark",
        tries: 20,
        neededRole: "guesser",
      ),
      AvailableGame(
        id: "1235",
        opponentName: "not_nuark",
        tries: 20,
        neededRole: "guesser",
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Obx(() => Text("Available ${availableGames.length} games")),
      ),
      body: SizedBox(
        width: size.width,
        height: size.height,
        child: Column(
          children: [
            Expanded(
              child: ObxValue(
                (data) => ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (context, index) {
                    final game = data[index];
                    final you = authData.login == game.opponentName;
                    return Card(
                      child: ListTile(
                        title: Text(
                          "Game of ${game.opponentName} ${you ? "(you)" : ""}"
                              .trim(),
                        ),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Tries: ${game.tries}"),
                            Text("Needed role: ${game.neededRole}"),
                          ],
                        ),
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            if (!you)
                              InkResponse(
                                onTap: () => _joinGame(game.id),
                                child:
                                    const Icon(Icons.connect_without_contact),
                              ),
                            if (you)
                              InkResponse(
                                onTap: () => _deleteGame(game.id),
                                child: const Icon(Icons.delete),
                              ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
                availableGames,
              ),
            ),
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: ObxValue(
                    (data) {
                      return ElevatedButton(
                        onPressed: data.firstWhereOrNull(
                                    (g) => g.opponentName == authData.login) ==
                                null
                            ? _createGame
                            : null,
                        child: const Text("Create"),
                      );
                    },
                    availableGames,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _createGame() async {
    var tries = 20;
    var role = "guesser";
    final data = await Get.dialog<Map<String, dynamic>?>(
        StatefulBuilder(builder: (buildContext, setState) {
      return AlertDialog(
        title: const Text("New game configuration"),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Tries: $tries"),
            Slider(
              value: tries.toDouble(),
              label: tries.toString(),
              onChanged: (value) {
                setState(() {
                  tries = value.round();
                });
              },
              min: 10,
              max: 50,
              divisions: 40,
            ),
            const Text("Needed role:"),
            Row(
              children: [
                Expanded(
                  child: DropdownButton<String>(
                    value: role,
                    items: const [
                      DropdownMenuItem(
                        value: "guesser",
                        child: Text("Guesser"),
                      ),
                      DropdownMenuItem(
                        value: "suggester",
                        child: Text("Suggester"),
                      ),
                    ],
                    onChanged: (value) {
                      setState(() {
                        role = value ?? "guesser";
                      });
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              Get.back();
            },
            child: const Text("Cancel"),
          ),
          TextButton(
            onPressed: () {
              Get.back(result: <String, dynamic>{
                "tries": tries,
                "role": role,
              });
            },
            child: const Text("Create"),
          ),
        ],
      );
    }));
    if (data == null) return;

    tries = data["tries"];
    role = data["role"];

    Get.snackbar("Game created", "Game created");
  }

  void _joinGame(String gameId) {}

  void _deleteGame(String gameId) {
    Get.defaultDialog(
      title: "Delete game",
      content: const Text("Are you sure you want to delete this game?"),
      textConfirm: "Delete",
      onConfirm: () {
        availableGames.removeWhere((g) => g.id == gameId);
        Get.back();
      },
      textCancel: "Cancel",
      onCancel: () {
        Get.back();
      },
    );
  }
}