import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/response/order_response.dart';
import 'package:e_commerce_training/src/page/order_page/order.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class OrderPage extends StatefulWidget {
  int? settingId;

  OrderPage(this.settingId);

  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {
  late OrderCubit _cubit;
  RefreshController _refreshController = RefreshController();

  @override
  void initState() {
    _cubit = OrderCubit();
    _cubit.addOder();
    _cubit.queryItem(widget.settingId);
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey200,
      appBar: appBar(context, "${_cubit.orderResponse.name}", rightIcons: [MdiIcons.cartOutline]),
      body: BlocProvider(
        create: (BuildContext context) => _cubit,
        child: BlocConsumer<OrderCubit, OrderState>(
          listener: (context, state) {
            if (state is OrderFailure) Util.showErrorSnackBar(context, state.error);
            if (!(state is OrderLoading)) {
              _refreshController.refreshCompleted();
              _refreshController.loadComplete();
            }
          },
          builder: (context, state) {
            return ListView.builder(
              itemCount: _cubit.orderResponse.listOrder!.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: R.color.white,
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Image.asset(
                            R.drawable.ic_health,
                            height: 40.h,
                            width: 40.w,
                          ),
                          Expanded(
                            child: Text(
                              "${_cubit.orderResponse.listOrder![index].shop}",
                              style: TextStyle(fontSize: 16.sp, color: R.color.blue),
                            ),
                          ),
                          Text(
                            "${_cubit.orderResponse.listOrder![index].payment}",
                            style: TextStyle(fontSize: 16.sp, color: R.color.orange),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          CachedNetworkImage(
                            imageUrl: "${_cubit.orderResponse.listOrder![index].thumb}",
                            height: 100.h,
                            width: 100.h,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "${_cubit.orderResponse.listOrder![index].title}",
                                  style: TextStyle(fontSize: 16.sp, color: R.color.black),
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      "${_cubit.orderResponse.listOrder![index].note}",
                                      style: TextStyle(fontSize: 16.sp, color: R.color.grey500),
                                    ),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.end,
                                      children: [
                                        Text(
                                          "x${_cubit.orderResponse.listOrder![index].quantity}",
                                          style: TextStyle(fontSize: 16.sp, color: R.color.black),
                                        ),
                                        Text(
                                          Util.formatMoney("${_cubit.orderResponse.listOrder![index].price}"),
                                          style: TextStyle(fontSize: 16.sp, color: R.color.red),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      Divider(),
                      Row(
                        children: [
                          Expanded(
                            child: Text(
                              "${_cubit.orderResponse.listOrder![index].product}",
                              style: TextStyle(fontSize: 16.sp, color: R.color.black),
                            ),
                          ),
                          Text(
                            "${_cubit.orderResponse.listOrder![index].text_total}:",
                            style: TextStyle(fontSize: 20.sp, color: R.color.black),
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Text(
                            Util.formatMoney("${_cubit.orderResponse.listOrder![index].total}"),
                            style: TextStyle(fontSize: 20.sp, color: R.color.red),
                          ),
                        ],
                      ),
                      Divider(),
                      Row(
                        children: [
                          Expanded(
                              child: _cubit.orderResponse.listOrder![index].time != null
                                  ? Text(
                                      "${_cubit.orderResponse.listOrder![index].time}",
                                      style: TextStyle(fontSize: 16.sp, color: R.color.black),
                                    )
                                  : SizedBox()),
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                            decoration: BoxDecoration(
                              color: R.color.orange,
                              borderRadius: BorderRadius.all(
                                Radius.circular(5),
                              ),
                            ),
                            child: Center(
                              child: Text(
                                "${_cubit.orderResponse.listOrder![index].text}",
                                style: TextStyle(fontSize: 20.sp, color: R.color.white),
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}
