import 'package:flutter/material.dart';

part 'card.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Body());
  }
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    final List<_Card> words = [
      _Card(
        word: 'Hello',
        translation: 'Привет',
        image:
            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS69a8OWnRueQNykBpuyfbGxl3gt5ct46NOHg&s',
        mark: 5,
      ),
      _Card(
          word: 'Book',
          translation: 'Книга',
          image:
              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfbH7Ckkbzrr3KZlb144GTaAmJnz87U9opGw&s',
          mark: 3),
      _Card(
          word: 'Cat',
          translation: 'Кот',
          image:
              'https://upload.wikimedia.org/wikipedia/commons/0/0e/Felis_silvestris_silvestris.jpg'),
    ];
    return Center(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: words
            .map((e) => _Card.fromData(
            e,
            onKnow: (title, isKnow) {
              _showSnackBar(context, title, isKnow);
            },

          )).toList(),
        ),
      ),
    );
  }
  
  void _showSnackBar(BuildContext context, String title, bool isKnow){
    WidgetsBinding.instance.addPostFrameCallback((_){
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(
            'Now you ${isKnow ? 'know' : 'don\'t know'} word $title',
            style: Theme.of(context).textTheme.bodyLarge,),
        backgroundColor: Colors.indigoAccent,
        duration: const Duration(seconds: 2),
          ));
    });
  }
}

class _CardState extends State<_Card> {
  bool isKnow = false;

  @override
  Widget build(BuildContext context) {
    return Container(
        constraints: const BoxConstraints(minHeight: 140, maxWidth: 240),
        padding: const EdgeInsets.all(20),
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.black12,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Stack(
          children: [
            Column(
              children: [
                Column(
                  children: [
                    Image.network(widget.image, width: 300),
                    Text(
                      widget.word,
                      style: Theme.of(context).textTheme.headlineLarge,
                    ),
                    Text(
                      widget.translation,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ],
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          isKnow = !isKnow;
                        });
                        widget.onKnow?.call(widget.word, isKnow);
                      },
                      child: AnimatedSwitcher(
                        duration: const Duration(milliseconds: 200),
                        child: isKnow
                            ? const Icon(Icons.check_circle,
                                color: Colors.green, key: ValueKey(0))
                            : const Icon(Icons.check_circle_outline,
                                key: ValueKey(1)),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.center,
              child: Row(children: [
                Container(
                  child: Container(
                    width: widget.mark * 10,
                    decoration: const BoxDecoration(
                      color: Colors.greenAccent,
                    ),
                    padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
                  ),
                ),
                Expanded(
                  child: Container(
                    decoration: const BoxDecoration(
                      color: Colors.red,
                    ),
                    padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
                  ),
                )
              ]),
            )
          ],
        ));
  }
}