import 'package:easycook_mobile/pages/account/edit_preference/edit_avoid_ingredient.dart';
import 'package:easycook_mobile/pages/account/edit_preference/edit_diet.dart';
import 'package:easycook_mobile/pages/account/edit_preference/edit_favorite_cuisine.dart';
import 'package:easycook_mobile/pages/account/edit_preference/edit_goals.dart';
import 'package:easycook_mobile/pages/account/edit_preference/edit_skill.dart';
import 'package:easycook_mobile/pages/personalisasi/favorite_cuisine.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';

class PreferensiAccountPage extends StatefulWidget {
  @override
  State<PreferensiAccountPage> createState() => _PreferensiAccountPageState();
}

class _PreferensiAccountPageState extends State<PreferensiAccountPage> {
  int? _radioValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Preferensi'),
        centerTitle: true,
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
        elevation: 0.5,
      ),
      body: Container(
        padding: EdgeInsets.only(top: 24, left: 16, right: 16, bottom: 20),
        child: ListView(
          children: [
            // Masakan Favorit
            Row(
              children: [
                Text(
                  'Masakan Favorit',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: 70,
                  height: 30,
                  child: TextButton(
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.amber,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => EditFavoriteCuisinePage(),
                        ),
                      );
                    },
                    child: Row(
                      children: [
                        SvgPicture.asset('assets/icons/edit_preference.svg'),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          'Edit',
                          style: GoogleFonts.montserrat().copyWith(
                            fontSize: 12,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              height: 140,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Indonesian.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 1,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Text(
                              'Indonesian',
                              style: GoogleFonts.montserrat().copyWith(
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Italian.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 2,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Text(
                              'Italian',
                              style: GoogleFonts.montserrat().copyWith(
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 120,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Chinesee.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 3,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Text(
                              'Chinese',
                              style: GoogleFonts.montserrat().copyWith(
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 24,
            ),
            // Bahan yang dihindari
            Row(
              children: [
                Text(
                  'Bahan yang Dihindari',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: 70,
                  height: 30,
                  child: TextButton(
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.amber,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => EditAvoidIngredientPage(),
                        ),
                      );
                    },
                    child: Row(
                      children: [
                        SvgPicture.asset('assets/icons/edit_preference.svg'),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          'Edit',
                          style: GoogleFonts.montserrat().copyWith(
                            fontSize: 12,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              height: 140,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/susu.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 2,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Text(
                              'Susu',
                              style: GoogleFonts.montserrat().copyWith(
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 24,
            ),
            // Diet
            Row(
              children: [
                Text(
                  'Diet',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: 70,
                  height: 30,
                  child: TextButton(
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.amber,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => EditDietPage(),
                        ),
                      );
                    },
                    child: Row(
                      children: [
                        SvgPicture.asset('assets/icons/edit_preference.svg'),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          'Edit',
                          style: GoogleFonts.montserrat().copyWith(
                            fontSize: 12,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              height: 140,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Vegan.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 1,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Expanded(
                              child: Text(
                                'Vegan',
                                style: GoogleFonts.montserrat().copyWith(
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 24,
            ),
            // Keahlian Memasak
            Row(
              children: [
                Text(
                  'Keahlian Memasak',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: 70,
                  height: 30,
                  child: TextButton(
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.amber,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => EditSkillsPage(),
                        ),
                      );
                    },
                    child: Row(
                      children: [
                        SvgPicture.asset('assets/icons/edit_preference.svg'),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          'Edit',
                          style: GoogleFonts.montserrat().copyWith(
                            fontSize: 12,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              height: 140,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 120,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Profesional.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 5,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Expanded(
                              child: Text(
                                'Profesional',
                                style: GoogleFonts.montserrat().copyWith(
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 24,
            ),
            // Tujuan
            Row(
              children: [
                Text(
                  'Tujuan',
                  style: GoogleFonts.montserrat().copyWith(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: 70,
                  height: 30,
                  child: TextButton(
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.amber,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => EditGoalsPage(),
                        ),
                      );
                    },
                    child: Row(
                      children: [
                        SvgPicture.asset('assets/icons/edit_preference.svg'),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          'Edit',
                          style: GoogleFonts.montserrat().copyWith(
                            fontSize: 12,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              height: 140,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Learn.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 1,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Expanded(
                              child: Text(
                                'Belajar Memasak',
                                style: GoogleFonts.montserrat().copyWith(
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    width: 130,
                    height: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 130,
                          height: 90,
                          padding: EdgeInsets.only(
                            bottom: 50,
                            left: 6,
                            right: 6,
                            top: 6,
                          ),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('images/Try.png'),
                              fit: BoxFit.cover,
                            ),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10),
                            ),
                          ),
                          child: Row(
                            children: [
                              Spacer(),
                              SvgPicture.asset(
                                'assets/icons/remove_preference.svg',
                              ),
                            ],
                          ),
                        ),
                        Row(
                          children: [
                            Radio(
                              value: 2,
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value as int?;
                                });
                              },
                            ),
                            Expanded(
                              child: Text(
                                'Mencoba Resep',
                                style: GoogleFonts.montserrat().copyWith(
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}