import 'package:app_hit_a_wod/src/blocs/my_orders.bloc.dart';
import 'package:app_hit_a_wod/src/models/box.model.dart';
import 'package:app_hit_a_wod/src/models/box_order.model.dart';
import 'package:app_hit_a_wod/src/models/subscription_selection.model.dart';
import 'package:app_hit_a_wod/src/providers/api.provider.dart';
import 'package:app_hit_a_wod/src/providers/user-subscriptions.provider.dart';
import 'package:app_hit_a_wod/src/utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

import '../../styles.dart';

class MyOrdersPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final us_provider = Provider.of<UserSubscriptionsProvider>(context);
    final _api = Provider.of<ApiProvider>(context);

    return neuScaffoldDetail(
      context: context,
      title: Text("Mis pedidos", style: Theme.of(context).textTheme.subhead.copyWith(fontWeight: FontWeight.w500, fontSize: 18)),
      action: Container(),
      body: Container(
        padding: EdgeInsets.all(20),
        child: StreamBuilder(
          stream: us_provider.activeStream,
          builder: (context, AsyncSnapshot<SubscriptionSelection> ss) {
            if(ss.hasData) {
              final bloc = MyOrdersBloc(ss.data.us.user_id, ss.data.box.id, _api);
              return StreamBuilder(
                stream: bloc.ordersStream,
                builder: (context, AsyncSnapshot<List<BoxOrder>> data) {
                  if(data.hasData) {
                    return ListView.builder(
                      itemCount: data.data.length,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        BoxOrder bo = data.data[index];
                        return Column(children: <Widget>[
                          miniPedido(context, bo, ss.data.box),
                          SizedBox(height: 20)
                        ]);
                      }
                    );
                  }
                  else return _skeleton();
                }
              );
            }
            else return _skeleton();
          }
        )
      )
    );
  }

  _skeleton() {
    final double height = 100;
    return SingleChildScrollView(
      child: Column(children: <Widget>[
        neuSkeletonCard(height, double.infinity),
        SizedBox(height: 20),
        neuSkeletonCard(height, double.infinity),
        SizedBox(height: 20),
        neuSkeletonCard(height, double.infinity),
        SizedBox(height: 20),
        neuSkeletonCard(height, double.infinity),
        SizedBox(height: 20),
        neuSkeletonCard(height, double.infinity),
        SizedBox(height: 20),
        neuSkeletonCard(height, double.infinity)
      ]),
    );
  }

  static Widget miniPedido(BuildContext context, BoxOrder bo, Box box, { bool clickable = true }) => Hero(
    tag: "mini-pedido-${bo.id}",
    child: neuButton(NeumorphicButton(
      padding: EdgeInsets.all(20),
      style: neuButtonStyle(),
      boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(8)),
      onClick: () { if(clickable) Navigator.pushNamed(context, 'my-orders-detail', arguments: {"bo": bo, "box": box}); },
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
        Row(crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[
          Expanded(child: Text("Pedido #${bo.id}", overflow: TextOverflow.ellipsis, style: Theme.of(context).textTheme.subtitle)),
          SizedBox(width: 20),
          neuChip(Text("${bo.total}€", style: Theme.of(context).textTheme.display2), colors: primaryColors)
        ]),
        SizedBox(height: 10),
        Row(children: <Widget>[
          Expanded(child: Text(DateFormat('dd/MM/yyyy').format(bo.created_at), style: Theme.of(context).textTheme.body1, overflow: TextOverflow.ellipsis)),
          SizedBox(width: 20),
          (bo.payment!=null && bo.payment.payment_type!=null ? (neuChip(Text(UtilsHAW.paymentTypeSlugToString(bo.payment.payment_type.slug), style: Theme.of(context).textTheme.display2), colors: secondaryShadow)) : Container())
        ]),
        SizedBox(height: 10),
        Row(children: <Widget>[
          Expanded(child: (bo.invoice!=null ? Text("Factura nº ${bo.invoice.official_number}", style: Theme.of(context).textTheme.body1, overflow: TextOverflow.ellipsis) : Container())),
          SizedBox(width: 20),
          (
            bo.payment==null || !bo.payment.charged ?
            neuChip(Text("No pagado", style: Theme.of(context).textTheme.display2), colors: [colors["seven"], colors["seven"]]) :
            neuChip(Text("Pagado", style: Theme.of(context).textTheme.display2), colors: [colors["six"], colors["six"]])
          ) 
        ])
      ])
    ), borderRadius: BorderRadius.all(Radius.circular(8)), width: double.infinity),
  );
}