import 'package:card_app/domain/models/card.dart';
import 'package:card_app/repositories/WordsRepository.dart';
import 'package:card_app/repositories/mock_repository.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../details_page/details_page.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 StatefulWidget {
  const Body({super.key});

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final SearchController searchController = SearchController();
  Future<List<CardData>?>? data;

  @override
  void initState() {
    super.initState();
    data = WordsRepository().loadData(); // Инициализация данных
  }


  @override
  Widget build(BuildContext context) {


    return Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(12),
            child: CupertinoSearchTextField(
              onChanged: (search) {
                setState(() {

                  data = WordsRepository().loadData(q: search);
                });
              },
            ),
          ),
          Expanded(
            child: Center(
              child: FutureBuilder<List<CardData>?>(
                future: data,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator(); // Индикатор загрузки
                  } else if (snapshot.hasError) {
                    return Text('Ошибка: ${snapshot.error}'); // Обработка ошибок
                  } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                    return const Text('Нет данных'); // Сообщение при отсутствии данных
                  } else {
                    return SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: snapshot.data!.map((data) {
                          return _Card.fromData(
                            data,
                            onKnow: (title, isKnow) =>
                                _showSnackBar(context, title, isKnow),
                            onTap: () => _navToDetails(context, data),
                          );
                        }).toList(),
                      ),
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _navToDetails(BuildContext context, CardData data) {
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (context) => DetailPage((data))),
    );
  }

  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 GestureDetector(
      onTap: widget.onTap,
      child: 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: LayoutBuilder(builder: (context, constraints) {
            double imageWidth = constraints.maxWidth;
            {
              return 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,

                  )
                ],
              );
            }
          })),
    );
  }
}