import 'package:flutter/material.dart';
import 'package:freekakes/components/buildcard_info.dart';
import 'package:freekake/components/collection_container.dart';

class DetailScreen extends StatefulWidget {
  final String title;
  final String image;
  final String description;

  const DetailScreen({
    super.key,
    required this.title,
    required this.image,
    required this.description,
  });

  @override
  State<DetailScreen> createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  List<bool> _isChecked = [];

  @override
  void initState() {
    super.initState();
    _isChecked = List.generate(
      widget.description.split("\n").length,
      (index) => false,
    );
  }

  @override
  Widget build(BuildContext context) {
    List<String> paragraphs = widget.description.split("\n");
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.asset(
              widget.image,
              width: 100,
              height: 100,
              fit: BoxFit.cover,
            ),
            const SizedBox(width: 16),
            Expanded(
              child: ListView.builder(
                itemCount: paragraphs.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      paragraphs[index],
                      style: const TextStyle(fontSize: 16),
                    ),
                    trailing: Checkbox(
                      value: _isChecked[index],
                      onChanged: (bool? value) {
                        setState(() {
                          _isChecked[index] = value ?? false;
                        });
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<PustakaScreen> createState() => _PustakaScreenState();
}

class _PustakaScreenState extends State<PustakaScreen> {
  final PageController _pageController = PageController();
  int _selectedIndex = 0;
  final TextEditingController _searchController = TextEditingController();
  String _searchQuery = "";

  final List<Map<String, String>> _collections = [
    {
      "label": "Luffy",
      "image": "assets/images/luffy.png",
      "description":
          "Karakter utama di One Piece.\nDia adalah bajak laut yang bercita-cita menjadi Raja Bajak Laut.",
    },
    {
      "label": "Oni Chan",
      "image": "assets/images/klipartz.png",
      "description":
          "Karakter ikonik dari anime.\nIa dikenal karena sifatnya yang protektif dan penyayang.",
    },
    {
      "label": "Cepot",
      "image": "assets/images/cepott.png",
      "description":
          "Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
    },
    {
      "label": "Cepot",
      "image": "assets/images/cepott.png",
      "description":
          "Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
    },
  ];

  void _onMenuTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    List<Map<String, String>> filteredCollections =
        _collections
            .where(
              (item) => item["label"]!.toLowerCase().contains(
                _searchQuery.toLowerCase(),
              ),
            )
            .toList();

    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            color: const Color.fromARGB(251, 122, 129, 121).withOpacity(0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildcardInfo(
                  icon: Icons.person,
                  text: 'User01',
                  extraIcon: Icons.emoji_events,
                  extraText: "5000",
                  width: 180,
                ),
                BuildcardInfo(
                  icon: Icons.monetization_on,
                  text: "1.300",
                  width: 90,
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Text(
              DateTime.now().toString(),
              style: const TextStyle(color: Colors.white),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: Container(
              height: 47,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: const Color.fromARGB(50, 237, 227, 227),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  const Icon(Icons.search, color: Colors.black54, size: 18),
                  const SizedBox(width: 8),
                  Expanded(
                    child: TextField(
                      controller: _searchController,
                      onChanged: (value) {
                        setState(() {
                          _searchQuery = value;
                        });
                      },
                      style: const TextStyle(color: Colors.black, fontSize: 12),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Search...',
                        hintStyle: TextStyle(color: Colors.grey),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 120,
                vertical: 40,
              ),
              child: GridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20,
                children:
                    filteredCollections.map((item) {
                      return CollectionContainer(
                        label: item["label"]!,
                        imagesrc: item["image"]!,
                        width: 100,
                        height: 100,
                        onTapAc:
                            () => {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder:
                                      (context) => DetailScreen(
                                        title: item["label"]!,
                                        image: item["image"]!,
                                        description: item["description"]!,
                                      ),
                                ),
                              ),
                            },
                      );
                    }).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}