import 'package:easycook_mobile/blocs/explore/explore_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:easycook_mobile/pages/detail_resep.dart';

class ExplorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageExplore();
  }
}

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

  @override
  State<PageExplore> createState() => _PageExploreState();
}

class _PageExploreState extends State<PageExplore> {
  late ExploreCubit _fetchExploreCubit;

  @override
  void initState() {
    // TODO: implement initState
    _fetchExploreCubit = ExploreCubit()..fetchExplore();
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _fetchExploreCubit.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Explore'),
        automaticallyImplyLeading: false,
        centerTitle: true,
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
        elevation: 0.5,
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 24, left: 16, right: 17),
        child: Column(
          children: [
            Container(
              height: 23,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    width: 113,
                    height: 23,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        border: Border.all(color: Colors.orange),
                        color: Colors.orange),
                    child: Center(
                      child: Text(
                        'Semua Kategori',
                        style: GoogleFonts.montserrat().copyWith(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  Container(
                    width: 113,
                    height: 23,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Colors.orange),
                    ),
                    child: Center(
                      child: Text(
                        'Sarapan',
                        style: GoogleFonts.montserrat().copyWith(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  Container(
                    width: 113,
                    height: 23,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Colors.orange),
                    ),
                    child: Center(
                      child: Text(
                        'Makan Siang',
                        style: GoogleFonts.montserrat().copyWith(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  Container(
                    width: 113,
                    height: 23,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Colors.orange),
                    ),
                    child: Center(
                      child: Text(
                        'Makan Malam',
                        style: GoogleFonts.montserrat().copyWith(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            ),
            BlocProvider(
              create: (context) => _fetchExploreCubit,
              child: BlocBuilder(
                bloc: _fetchExploreCubit,
                builder: (context, state) {
                  return state is ExploreLoading
                      ? Center(
                          child: CircularProgressIndicator(),
                        )
                      : state is ExploreFailure
                          ? Center(
                              child: Text(state.message),
                            )
                          : state is ExploreSuccess
                              ? SizedBox(
                                  height: 549,
                                  child: GridView.builder(
                                      shrinkWrap: true,
                                      gridDelegate:
                                          const SliverGridDelegateWithMaxCrossAxisExtent(
                                        maxCrossAxisExtent: 200,
                                        childAspectRatio: 3 / 2,
                                        crossAxisSpacing: 20,
                                        mainAxisSpacing: 120,
                                      ),
                                      itemCount: state.recipes.length,
                                      itemBuilder: (BuildContext ctx, index) {
                                        final data = state.recipes[index];
                                        return Wrap(
                                          runSpacing: 20,
                                          spacing: 20,
                                          children: [
                                            InkWell(
                                              onTap: () {
                                                Navigator.push(
                                                  context,
                                                  MaterialPageRoute(
                                                    builder: (context) =>
                                                        DetailResepPage(
                                                      recipeId: data.id,
                                                    ),
                                                  ),
                                                );
                                              },
                                              child: Container(
                                                width: 156,
                                                height: 216,
                                                margin: const EdgeInsets.only(
                                                    right: 15),
                                                padding: const EdgeInsets.only(
                                                    top: 8,
                                                    right: 8,
                                                    left: 8,
                                                    bottom: 16),
                                                decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(10),
                                                  image: DecorationImage(
                                                    image: NetworkImage(
                                                        data.imageUrl),
                                                    fit: BoxFit.fitHeight,
                                                  ),
                                                ),
                                                child: Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Row(
                                                      children: [
                                                        // Rating
                                                        SvgPicture.asset(
                                                            'assets/icons/Star 1.svg'),
                                                        SizedBox(
                                                          width: 4,
                                                        ),
                                                        Text(
                                                          '4/5',
                                                          style: GoogleFonts
                                                                  .montserrat()
                                                              .copyWith(
                                                            fontSize: 10,
                                                            color: Colors.white,
                                                            fontWeight:
                                                                FontWeight.bold,
                                                          ),
                                                        ),
                                                        const Spacer(),
                                                        // Like Button
                                                        OutlinedButton(
                                                          onPressed: () {},
                                                          child: const Icon(
                                                            Icons.favorite,
                                                            color: Colors.amber,
                                                          ),
                                                          style: OutlinedButton
                                                              .styleFrom(
                                                            shape:
                                                                CircleBorder(),
                                                            backgroundColor:
                                                                Colors.white,
                                                            side: BorderSide(
                                                                color: Colors
                                                                    .amber),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                    const Spacer(),
                                                    Text(
                                                      data.title,
                                                      style: GoogleFonts
                                                              .montserrat()
                                                          .copyWith(
                                                        color: Colors.white,
                                                        fontSize: 12,
                                                        fontWeight:
                                                            FontWeight.w900,
                                                      ),
                                                    ),
                                                    Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Text(
                                                        'kelengkapan bahan',
                                                        style: GoogleFonts
                                                                .montserrat()
                                                            .copyWith(
                                                          color: Colors.white,
                                                          fontSize: 10,
                                                        ),
                                                      ),
                                                    ),
                                                    Row(
                                                      children: [
                                                        LinearPercentIndicator(
                                                          width: 100.0,
                                                          lineHeight: 8.0,
                                                          percent: 0.8,
                                                          backgroundColor:
                                                              Colors.white,
                                                          progressColor:
                                                              Colors.orange,
                                                        ),
                                                        Spacer(),
                                                        Text(
                                                          '80 %',
                                                          style: GoogleFonts
                                                                  .montserrat()
                                                              .copyWith(
                                                            color:
                                                                Colors.orange,
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ],
                                        );
                                      }),
                                )
                              : SizedBox();
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

// Widget _cardResep(BuildContext context) {
//   return InkWell(
//     onTap: () {
//       Navigator.push(
//         context,
//         MaterialPageRoute(
//           builder: (context) => DetailResepPage(),
//         ),
//       );
//     },
//     child: Container(
//       width: 156,
//       height: 216,
//       padding: const EdgeInsets.only(top: 8, right: 8, left: 8, bottom: 16),
//       decoration: BoxDecoration(
//         image: DecorationImage(
//           image: AssetImage('images/card_bg.png'),
//           fit: BoxFit.fitHeight,
//         ),
//       ),
//       child: Column(
//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
//         children: [
//           Row(
//             children: [
//               // Rating
//               SvgPicture.asset('assets/icons/Star 1.svg'),
//               SizedBox(
//                 width: 4,
//               ),
//               Text(
//                 '4/5',
//                 style: GoogleFonts.montserrat().copyWith(
//                   fontSize: 10,
//                   color: Colors.white,
//                   fontWeight: FontWeight.bold,
//                 ),
//               ),
//               const Spacer(),
//               // Like Button
//               OutlinedButton(
//                 onPressed: () {},
//                 child: const Icon(
//                   Icons.favorite,
//                   color: Colors.amber,
//                 ),
//                 style: OutlinedButton.styleFrom(
//                   shape: CircleBorder(),
//                   backgroundColor: Colors.white,
//                   side: BorderSide(color: Colors.amber),
//                 ),
//               ),
//             ],
//           ),
//           const Spacer(),
//           Text(
//             'Tumis Sawi dengan Terasi',
//             style: GoogleFonts.montserrat().copyWith(
//               color: Colors.white,
//               fontSize: 12,
//               fontWeight: FontWeight.w900,
//             ),
//           ),
//           Align(
//             alignment: Alignment.centerLeft,
//             child: Text(
//               'kelengkapan bahan',
//               style: GoogleFonts.montserrat().copyWith(
//                 color: Colors.white,
//                 fontSize: 10,
//               ),
//             ),
//           ),
//           Row(
//             children: [
//               LinearPercentIndicator(
//                 width: 100.0,
//                 lineHeight: 8.0,
//                 percent: 0.8,
//                 backgroundColor: Colors.white,
//                 progressColor: Colors.orange,
//               ),
//               Spacer(),
//               Text(
//                 '80 %',
//                 style: GoogleFonts.montserrat().copyWith(
//                   color: Colors.orange,
//                 ),
//               ),
//             ],
//           ),
//         ],
//       ),
//     ),
//   );
// }