import 'package:easycook_mobile/models/recommedation.dart';
import 'package:easycook_mobile/pages/detail_resep.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/theme.dart';
import 'package:flutter/material.dart';

class RekomendasiPage extends StatefulWidget {
  final List<RekomendasiResep> recipeData;

  const RekomendasiPage({super.key, required this.recipeData});
  @override
  State<RekomendasiPage> createState() => _RekomendasiPageState();
}

class _RekomendasiPageState extends State<RekomendasiPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rekomendasi'),
        centerTitle: true,
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
        elevation: 0.5,
      ),
      body: ListView(
        children: [
          Container(
            padding: EdgeInsets.only(
              top: 24,
              left: 16,
              right: 16,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Rekomendasi Menu',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 6,
                ),
                Text(
                  'Rekomendasi menu berdasarkan bahan di dapurmu.',
                  style: GoogleFonts.montserrat().copyWith(fontSize: 14),
                ),
                SizedBox(
                  height: 24,
                ),
                SizedBox(
                  height: 600,
                  child: GridView.builder(
                      shrinkWrap: true,
                      gridDelegate:
                          const SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 200,
                        childAspectRatio: 3 / 2,
                        crossAxisSpacing: 20,
                        mainAxisSpacing: 120,
                      ),
                      itemCount: widget.recipeData.length,
                      itemBuilder: (BuildContext context, index) {
                        final data = widget.recipeData[index];
                        return Wrap(
                          children: [
                            _cardResep(context, data),
                          ],
                        );
                      }),
                )

                // ListView.builder(
                //     shrinkWrap: true,
                //     physics: NeverScrollableScrollPhysics(),
                //     itemCount: widget.recipeData.length,
                //     itemBuilder: (context, index) {
                //       final data = widget.recipeData[index];
                //       return _cardResep(context, data);
                //     })
                // Row(
                //   children: [
                //     _cardResep(context),
                //     Spacer(),
                //     _cardResep(context),
                //   ],
                // ),
                // SizedBox(
                //   height: 24,
                // ),
                // Row(
                //   children: [
                //     _cardResep(context),
                //     Spacer(),
                //     _cardResep(context),
                //   ],
                // ),
                // SizedBox(
                //   height: 24,
                // ),
                // Row(
                //   children: [
                //     _cardResep(context),
                //     Spacer(),
                //     _cardResep(context),
                //   ],
                // ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Widget _cardResep(BuildContext context, RekomendasiResep data) {
  return InkWell(
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DetailResepPage(
            recipeId: data.id,
          ),
        ),
      );
    },
    child: Container(
      width: 156,
      height: 216,
      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: 80.0,
                lineHeight: 8.0,
                percent: 0.8,
                backgroundColor: Colors.white,
                progressColor: Colors.orange,
              ),
              Spacer(),
              Text(
                '${data.completenessPercentage} %',
                style: GoogleFonts.montserrat().copyWith(
                  color: Colors.orange,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}