import 'package:feelverapp/ui/menu/menu.dart';
import 'package:feelverapp/ui/my_order_status/my_order_status.dart';
import 'package:feelverapp/util/SizeConfig.dart';
import 'package:flutter/material.dart';

class Favorite extends StatefulWidget {
  @override
  _FavoriteState createState() => _FavoriteState();
}

class _FavoriteState extends State<Favorite> {
  bool checkBoxValue = false;
  int a = 1;
  int b = 1;

  @override
  Widget build(BuildContext context) {
    SizeConfig(context);
    return Scaffold(
      body: _setupView(),
      bottomNavigationBar: Container(
        color: Color.fromRGBO(69, 85, 79, 1),
        height: SizeConfig.getHeight(120),
        child: Column(
          children: <Widget>[
            Container(
              child: Padding(
                padding: const EdgeInsets.only(top: 20),
                child: RaisedButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                  onPressed: () {
//                  Navigator.push(
//                    context,
//                    MaterialPageRoute(
//                      builder: (context) => MyOrderStatus(),
//                    ),
//                  );
                  },
                  padding: EdgeInsets.only(
                    left: SizeConfig.getPadding(85),
                    right: SizeConfig.getPadding(85),
                    top: SizeConfig.getPadding(15),
                    bottom: SizeConfig.getPadding(15),
                  ),
                  color: Color(0xFF3694A3),
                  child: Text(
                    'เพิ่มลงในตระกร้าของฉัน',
                    style: TextStyle(
                      fontSize: SizeConfig.getFontSize(16),
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _setupView() {
    return Column(
      children: <Widget>[
        header(),
        containt(),
      ],
    );
  }

  Widget containt() {
    return Expanded(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(
            left: 10,
            right: 10,
            top: 16,
            bottom: 8,
          ),
          child: Container(
            alignment: FractionalOffset.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                list1(),
                Divider(
                  color: Colors.black,
                  height: 40,
                ),
                list2(),
                Divider(
                  color: Colors.black,
                  height: 40,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget list1() {
    return Container(
//      color: Colors.red,
      height: SizeConfig.getHeight(150),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 10),
            child: Image.asset(
              'assets/images/demo_img.png',
              width: SizeConfig.getWidth(110),
              height: SizeConfig.getHeight(150),
              fit: BoxFit.fitWidth,
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.only(
                left: SizeConfig.getPadding(10),
                right: SizeConfig.getPadding(5),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
//                    color: Colors.blue,
                    child: Row(
                      children: <Widget>[
                        Text(
                          'Ivory Relax and Spa',
                        ),
                        Spacer(),
                        Checkbox(
                            checkColor: Color(0xFFEEAFB7),
                            activeColor: Colors.white,
                            value: checkBoxValue,
                            onChanged: (bool value) {
                              setState(() {
                                print(value);
                                checkBoxValue = value;
                              });
                            }),
                      ],
                    ),
                  ),
                  Container(
//                    color: Colors.white,
                    child: Text('นวดเเผนไทย'),
                  ),
                  SizedBox(
                    height: SizeConfig.getHeight(5),
                  ),
                  Container(
//                    color: Colors.yellow,
                    child: Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/images/clock.png',
                          height: SizeConfig.getHeight(20),
                          width: SizeConfig.getWidth(20),
                        ),
                        SizedBox(
                          width: SizeConfig.getWidth(5),
                        ),
                        Text('90 นาที'),
                        Spacer(),
                        Icon(
                          Icons.local_offer,
                          color: Color(0xFFEEAFB7),
                        ),
                        Text(
                          '฿1,599.00',
                          style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            fontSize: SizeConfig.getFontSize(16),
                            fontFamily: "SF_Pro_Text",
                            color: Color(0xFFEEAFB7),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: SizeConfig.getHeight(5),
                  ),
                  Container(
//                    color: Colors.orangeAccent,
                    child: Row(
                      children: <Widget>[
                        SizedBox(
                          width: SizeConfig.getPadding(20),
                          height: SizeConfig.getPadding(20),
                          child: RaisedButton(
                            child: Text('-'),
                            padding: EdgeInsets.only(right: 0),
                            onPressed: () {
                              setState(() {
                                a = a - 1;
                              });
                            },
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 8, left: 8),
                          child: Text('$a'),
                        ),
                        SizedBox(
                          width: SizeConfig.getPadding(20),
                          height: SizeConfig.getPadding(20),
                          child: RaisedButton(
                            child: Text('+'),
                            padding: EdgeInsets.only(right: 0),
                            onPressed: () {
                              setState(() {
                                a = a + 1;
                              });
                            },
                          ),
                        ),
                        Spacer(),
                        Text(
                          '฿1,200.00',
                          style: TextStyle(
                            fontSize: SizeConfig.getFontSize(20),
                            color: Color(0xFFFD2956),
                            fontFamily: "SF_Pro_Text",
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget list2() {
    return Container(
//      color: Colors.red,
      height: SizeConfig.getHeight(150),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 10),
            child: Image.asset(
              'assets/images/demo_img.png',
              width: SizeConfig.getWidth(110),
              height: SizeConfig.getHeight(150),
              fit: BoxFit.fitWidth,
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.only(
                left: SizeConfig.getPadding(10),
                right: SizeConfig.getPadding(5),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
//                    color: Colors.blue,
                    child: Row(
                      children: <Widget>[
                        Text(
                          'Ivory Relax and Spa',
                        ),
                        Spacer(),
                        Checkbox(
                            checkColor: Color(0xFFEEAFB7),
                            activeColor: Colors.white,
                            value: checkBoxValue,
                            onChanged: (bool value) {
                              setState(() {
                                print(value);
                                checkBoxValue = value;
                              });
                            }),
                      ],
                    ),
                  ),
                  Container(
//                    color: Colors.white,
                    child: Text('นวดเเผนไทย'),
                  ),
                  SizedBox(
                    height: SizeConfig.getHeight(5),
                  ),
                  Container(
//                    color: Colors.yellow,
                    child: Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/images/clock.png',
                          height: SizeConfig.getHeight(20),
                          width: SizeConfig.getWidth(20),
                        ),
                        SizedBox(
                          width: SizeConfig.getWidth(5),
                        ),
                        Text('90 นาที'),
                        Spacer(),
                        Icon(
                          Icons.local_offer,
                          color: Color(0xFFEEAFB7),
                        ),
                        Text(
                          '฿1,599.00',
                          style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            fontSize: SizeConfig.getFontSize(16),
                            fontFamily: "SF_Pro_Text",
                            color: Color(0xFFEEAFB7),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: SizeConfig.getHeight(5),
                  ),
                  Container(
//                    color: Colors.orangeAccent,
                    child: Row(
                      children: <Widget>[
                        SizedBox(
                          width: SizeConfig.getPadding(20),
                          height: SizeConfig.getPadding(20),
                          child: RaisedButton(
                            child: Text('-'),
                            padding: EdgeInsets.only(right: 0),
                            onPressed: () {
                              setState(() {
                                b = b - 1;
                              });
                            },
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 8, left: 8),
                          child: Text('$b'),
                        ),
                        SizedBox(
                          width: SizeConfig.getPadding(20),
                          height: SizeConfig.getPadding(20),
                          child: RaisedButton(
                            child: Text('+'),
                            padding: EdgeInsets.only(right: 0),
                            onPressed: () {
                              setState(() {
                                b = b + 1;
                              });
                            },
                          ),
                        ),
                        Spacer(),
                        Text(
                          '฿1,200.00',
                          style: TextStyle(
                            fontSize: SizeConfig.getFontSize(20),
                            color: Color(0xFFFD2956),
                            fontFamily: "SF_Pro_Text",
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget header() {
    return Container(
      child: Stack(
        children: <Widget>[
          Container(
            color: Color.fromRGBO(69, 85, 79, 1),
            height: SizeConfig.getHeight(200),
            width: MediaQuery.of(context).size.width,
          ),
          Positioned(
            top: SizeConfig.getPadding(50),
            left:
                SizeConfig.getPadding(MediaQuery.of(context).size.width / 3.5),
            child: Container(
              alignment: Alignment.topCenter,
              child: Image.asset(
                'assets/images/feelver_banner.png',
                width: MediaQuery.of(context).size.width / 2.5,
              ),
            ),
          ),
          Positioned(
            top: SizeConfig.getPadding(77),
            left: SizeConfig.getPadding(16),
            child: Container(
              child: GestureDetector(
                onTap: () {
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return NavDrawer();
                    },
                  );
                },
                child: Image.asset(
                  'assets/images/ic_menu.png',
                  height: SizeConfig.getWidth(24),
                  width: SizeConfig.getWidth(30),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Positioned(
            top: SizeConfig.getPadding(77),
            right: SizeConfig.getPadding(60),
            child: Container(
              child: Image.asset(
                'assets/images/ic_noti.png',
                height: SizeConfig.getWidth(30),
                width: SizeConfig.getWidth(30),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned(
            top: SizeConfig.getPadding(77),
            right: SizeConfig.getPadding(20),
            child: InkWell(
//                onTap: () {
//                  Navigator.push(
//                    context,
//                    MaterialPageRoute(builder: (context) => LoginPage()),
//                  );
//                },
              child: Container(
                child: Image.asset(
                  'assets/images/ic_userimg.png',
                  height: SizeConfig.getWidth(30),
                  width: SizeConfig.getWidth(30),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
