import 'package:flutter/material.dart';
import 'package:match_magic/models/game_state.dart';
import 'package:provider/provider.dart';

class GameScreen extends StatelessWidget {
  const GameScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final gameState = context.watch<GameState>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Match Magic'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final tileSize = constraints.maxWidth / gameState.cols;

          return Center(
            child: Container(
              width: constraints.maxWidth,
              height: constraints.maxWidth,
              child: Stack(
                children: [
                  for (int row = 0; row < gameState.rows; row++)
                    for (int col = 0; col < gameState.cols; col++)
                      AnimatedPositioned(
                        key: ValueKey('${row}_$col${gameState.grid[row][col]}'),
                        duration: const Duration(milliseconds: 300),
                        left: col * tileSize,
                        top: row * tileSize,
                        child: GestureDetector(
                          onTap: () {
                            gameState.selectElement(row, col);
                          },
                          child: AnimatedContainer(
                            duration: const Duration(milliseconds: 300),
                            width: tileSize - 4,
                            height: tileSize - 4,
                            margin: const EdgeInsets.all(2.0),
                            decoration: BoxDecoration(
                              border: gameState.selectedRow == row &&
                                      gameState.selectedCol == col
                                  ? Border.all(color: Colors.red, width: 2.0)
                                  : null,
                              color: Colors.blue[100],
                            ),
                            child: Center(
                              child: AnimatedOpacity(
                                opacity:
                                    gameState.grid[row][col] != 0 ? 1.0 : 0.0,
                                duration: const Duration(milliseconds: 300),
                                child: gameState.grid[row][col] != 0
                                    ? Image.asset(
                                        'assets/images/diamond${gameState.grid[row][col]}.png',
                                        fit: BoxFit.cover,
                                        width: tileSize - 4,
                                        height: tileSize - 4,
                                      )
                                    : const SizedBox.shrink(),
                              ),
                            ),
                          ),
                        ),
                      ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}