import 'dart:async';

import 'package:battle/button/button_controller.dart';
import 'package:battle/data/card.dart';
import 'package:flutter/material.dart';
import 'package:widget/widget.dart';

import '../button/button_painter.dart';
import 'setting_page.dart';
import 'view/count_down_dialog.dart';

class GamePage extends StatefulWidget {
  final CardItem card;

  const GamePage({
    super.key,
    required this.card,
  });

  @override
  State<GamePage> createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> with SingleTickerProviderStateMixin {
  late ButtonController _controller;
  Timer? _timer;

  int _count = 0;

  @override
  void initState() {
    super.initState();
    _controller = ButtonController(widget.card, vsync: this);
  }

  void _createTimer() {
    _timer?.cancel();
    _timer = Timer.periodic(const Duration(milliseconds: 250), (count) {
      if (mounted) {
        setState(() {
          _count = count.tick;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: ColorFiltered(
              colorFilter: const ColorFilter.matrix(<double>[
                0.299, 0.587, 0.114, 0, 0, //r
                0.299, 0.587, 0.114, 0, 0, //g
                0.299, 0.587, 0.114, 0, 0, //b
                0, 0, 0, 0.1, 0, //a
              ]),
              child: Image.asset(
                'assets/images/background.png',
                repeat: ImageRepeat.repeat,
                cacheWidth: 182,
                cacheHeight: 52,
              ),
            ),
          ),
          Positioned.fill(
            child: SafeArea(
              top: true,
              bottom: true,
              child: Column(
                children: [
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(40),
                                color: Theme.of(context).colorScheme.primaryContainer,
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  const Icon(Icons.timer),
                                  const SizedBox(width: 8),
                                  Text(
                                    '${Duration(milliseconds: _count * 250).inSeconds}秒',
                                    style: Theme.of(context).textTheme.titleLarge,
                                  ),
                                  const SizedBox(width: 8),
                                ],
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(height: 16),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          child: BattleBoard(
                            card: ClipRRect(
                              borderRadius: BorderRadius.circular(8),
                              child: Container(
                                width: double.infinity,
                                height: double.infinity,
                                color: Colors.grey,
                                child: Image.asset(
                                  widget.card.assetPath,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            button: CustomPaint(
                              painter: ButtonPainter(controller: _controller),
                              child: const SizedBox.expand(),
                            ),
                          ),
                        ),
                        const SizedBox(height: 32),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          child: ButtonBar(
                            alignment: MainAxisAlignment.spaceAround,
                            children: [
                              FilledButton(
                                onPressed: () {
                                  showCountDown(context).then((_) {
                                    _createTimer();
                                    _controller.startOrReset();
                                  });
                                },
                                child: const Text('开始'),
                              ),
                              FilledButton(
                                onPressed: () {
                                  _controller.stop();
                                  _timer?.cancel();
                                },
                                child: const Text('停止'),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            right: 16,
            top: MediaQuery.of(context).padding.top + 16,
            child: IconButton(
              icon: const Icon(Icons.settings),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (_) {
                  return const SettingPage();
                }));
              },
            ),
          ),
        ],
      ),
    );
  }
}