import 'package:easycook_mobile/blocs/home/home_cubit.dart';
import 'package:easycook_mobile/blocs/user_detail/user_detail_cubit.dart';
import 'package:easycook_mobile/pages/detail_resep.dart';
import 'package:easycook_mobile/theme.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:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:easycook_mobile/pages/account/profil.dart';
import 'package:easycook_mobile/pages/dapurku.dart';
import 'package:easycook_mobile/pages/explore.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static List<Widget> _pages = <Widget>[
    PageHome(),
    PageExplore(),
    PageDapurku(),
    PageProfil(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages.elementAt(_selectedIndex),
      bottomNavigationBar: Container(
        height: 95,
        child: BottomNavigationBar(
          showSelectedLabels: true,
          showUnselectedLabels: true,
          selectedItemColor: Colors.orange,
          unselectedItemColor: Colors.black,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
              ),
              label: 'Beranda',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.explore,
              ),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.kitchen_rounded,
              ),
              label: 'Dapurku',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.account_circle,
              ),
              label: 'Akun',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

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

  @override
  State<PageHome> createState() => _PageHomeState();
}

class _PageHomeState extends State<PageHome> {
  late HomeCubit _fetchHomeCubit;
  late UserDetailCubit _fetchUserDetailCubit;

  @override
  void initState() {
    // TODO: implement initState
    _fetchHomeCubit = HomeCubit()..fetchHome();
    _fetchUserDetailCubit = UserDetailCubit()..fetchUserDetail();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/BG.png'),
          fit: BoxFit.fill,
        ),
      ),
      child: ListView(
        children: [
          // Header
          Container(
              padding: EdgeInsets.only(top: 50, left: 16, right: 16),
              child: BlocProvider(
                create: (context) => _fetchUserDetailCubit,
                child: BlocBuilder(
                  bloc: _fetchUserDetailCubit,
                  builder: (context, state) {
                    return state is UserDetailLoading
                        ? Center(
                            child: CircularProgressIndicator(),
                          )
                        : state is UserDetailFailure
                            ? Center(
                                child: Text(state.message),
                              )
                            : state is UserDetailSuccess
                                ? Column(
                                    children: [
                                      Row(
                                        children: [
                                          ClipRRect(
                                            borderRadius:
                                                BorderRadius.circular(45),
                                            child: Image.asset(
                                              'images/profil.png',
                                              fit: BoxFit.cover,
                                              width: 40,
                                              height: 40,
                                            ),
                                          ),
                                          SizedBox(
                                            width: 16,
                                          ),
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                'Selamat Datang',
                                                style: GoogleFonts.montserrat()
                                                    .copyWith(
                                                  color: Colors.black45,
                                                  fontSize: 12,
                                                  fontWeight: FontWeight.bold,
                                                ),
                                              ),
                                              Row(
                                                children: [
                                                  Text(
                                                    state.userDetail.user
                                                        .firstName,
                                                    style:
                                                        GoogleFonts.montserrat()
                                                            .copyWith(
                                                      color: Colors.black,
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 7,
                                                  ),
                                                  Text(
                                                    state.userDetail.user
                                                        .lastName,
                                                    style:
                                                        GoogleFonts.montserrat()
                                                            .copyWith(
                                                      color: Colors.black,
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                          Spacer(),
                                          SvgPicture.asset(
                                            'assets/icons/cart.svg',
                                            color: Colors.amber,
                                            width: 24,
                                            height: 24,
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: 24,
                                      ),
                                    ],
                                  )
                                : SizedBox();
                  },
                ),
              )),

          // Search
          Padding(
            padding: const EdgeInsets.only(top: 24, left: 16, right: 16),
            child: TextFormField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blueAccent),
                ),
                hintText: "Cari",
                hintStyle: TextStyle(color: Colors.black26),
              ),
            ),
          ),
          // Text
          Padding(
            padding: const EdgeInsets.only(top: 32, left: 16),
            child: Text(
              'Hanya Untuk Kamu',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontSize: 14,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 6, left: 16),
            child: Text(
              'Rekomendasi menu berdasarkan bahan di dapurmu',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontSize: 14,
              ),
            ),
          ),
          // Card Resep

          Padding(
            padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
            child: SizedBox(
              height: 220,
              width: double.infinity,
              child: BlocProvider(
                create: (context) => _fetchHomeCubit,
                child: BlocBuilder(
                  bloc: _fetchHomeCubit,
                  builder: (context, state) {
                    return state is HomeLoading
                        ? Center(
                            child: CircularProgressIndicator(),
                          )
                        : state is HomeFailure
                            ? Center(
                                child: Text(state.message),
                              )
                            : state is HomeSuccess
                                ? ListView.separated(
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder: (context, 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,
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      );

                                      // Text(data.difficulty);
                                    },
                                    separatorBuilder:
                                        (BuildContext context, int index) =>
                                            const Divider(),
                                    itemCount: state.recipes.length,
                                  )
                                : SizedBox();
                  },
                ),
              ),
            ),
          ),

          // Text
          Padding(
            padding: const EdgeInsets.only(top: 32, left: 16),
            child: Text(
              'Paling banyak disukai',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontSize: 14,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16, top: 6),
            child: Text(
              'Menu yang disukai oleh banyak orang',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontSize: 14,
              ),
            ),
          ),
          // Card Resep Lebar
          Container(
            // width: 311,
            height: 216,
            padding: const EdgeInsets.only(top: 24),
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                _cardResepLebar(),
                _cardResepLebar(),
                _cardResepLebar(),
              ],
            ),
          ),
          // Text
          Padding(
            padding: const EdgeInsets.only(top: 32, left: 16),
            child: Text(
              'Paling banyak ingin dicoba',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8, left: 16),
            child: Text(
              'Menu yang ingin dicoba oleh banyak orang',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.black,
                fontSize: 14,
              ),
            ),
          ),
          // Card resep

          Padding(
            padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
            child: SizedBox(
              height: 220,
              width: double.infinity,
              child: BlocProvider(
                create: (context) => _fetchHomeCubit,
                child: BlocBuilder(
                  bloc: _fetchHomeCubit,
                  builder: (context, state) {
                    return state is HomeLoading
                        ? Center(
                            child: CircularProgressIndicator(),
                          )
                        : state is HomeFailure
                            ? Center(
                                child: Text(state.message),
                              )
                            : state is HomeSuccess
                                ? ListView.separated(
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder: (context, 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,
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      );

                                      // Text(data.difficulty);
                                    },
                                    separatorBuilder:
                                        (BuildContext context, int index) =>
                                            const Divider(),
                                    itemCount: state.recipes.length,
                                  )
                                : 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,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

Widget _cardResepLebar() {
  return Container(
    width: 311,
    height: 216,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/bg_card_lebar.png'),
        fit: BoxFit.fitHeight,
      ),
    ),
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 100, left: 32, right: 12),
          child: Column(
            children: [
              Row(
                children: [
                  Text(
                    'Tumis Tahu Kemangi',
                    style: GoogleFonts.montserrat().copyWith(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                ],
              ),
              Row(
                children: [
                  Text(
                    'Kelengkapan bahan',
                    style: GoogleFonts.montserrat()
                        .copyWith(fontSize: 10, color: Colors.white),
                  ),
                ],
              ),
              Row(
                children: [
                  LinearPercentIndicator(
                    width: 210,
                    lineHeight: 8.0,
                    percent: 0.8,
                    backgroundColor: Colors.white,
                    progressColor: Colors.orange,
                  ),
                  Text(
                    '80 %',
                    style: GoogleFonts.montserrat().copyWith(
                      color: Colors.orange,
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  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,
                    ),
                  ),
                  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),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
