import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import '../../constants.dart';
import '../../generated/l10n.dart';
import '../../models/coupon.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';
import '../../utils/utils.dart';
import '../../widgets/general/breadcrumbs.dart';
import '../../widgets/general/navigationbar.dart';

class DesktopCoupons extends StatefulWidget {
  final int contactId;
  final Key key;
  const DesktopCoupons(this.contactId, {this.key});

  @override
  State<StatefulWidget> createState() {
    return DesktopCouponsState();
  }
}

class DesktopCouponsState extends State<DesktopCoupons> {
  List<Coupon> coupons;

  double sideSpace = 0;
  double mainSpace = 1200;

  @override
  Widget build(BuildContext context) {
    store.dispatch(UpdateContext(context));

    if (coupons == null ) {
      return new Scaffold(
        body: Center(
          child: SpinKitWave(
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ),
      );
    }

    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }

    Widget w = ListView.builder(
        itemCount: coupons.length > 0 ? coupons.length : 1,
        itemBuilder: (BuildContext context, int position) {
          if (coupons.length > 0) {
            Coupon coupon = coupons[position];
            return Container(
              color: Colors.black12,
              child: couponWidget(coupon),
            );
          } else {
            return Center(
              child: Container(
                padding: EdgeInsets.all(20.0),
                child: Text(
                  S.of(context).no_coupon_available,
                ),
              ),
            );
          }
        }
    );

    return Scaffold(
      appBar: NavigationBar(
        title: S.of(context).blog,
        back: true,
        breadCrumbs: [
          BreadCrumb(S.of(context).coupons, null),
        ],
        breadCrumbHeight: Constants.BREADCRUMB_HEIGHT,
      ),
      body: Row(
        children: [
          Container(
            width: sideSpace,
          ),
          Expanded(child: w,),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
  }

  Widget couponWidget(Coupon coupon) {
    Column column = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[],
    );

    Row row = Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(right: 5.0),
                  child: coupon.store != null ?
                  Util.showImage('${coupon.store.picUrl}',
                    fit: BoxFit.fill,
                    width: 40.0,
                  ) :
                  Image.asset(
                    'assets/images/ic_launcher.png',
                    width: 40.0,
                    height: 40.0,
                    fit: BoxFit.fill,
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        coupon.store != null ? coupon.store.name : S.of(context).general_coupon,
                        style: TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Text(
                        coupon.description,
                        style: TextStyle(
                          fontSize: 12.0,
                          color: Colors.black26,
                        ),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );

    Column valueColumn = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          child: !coupon.isPercentage ?
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Text(
                  '\$',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.redAccent,
                  ),
                ),
              ),
              Container(
                child: Text(
                  '${Utils.smartRound(coupon.valueAmount, 2)}',
                  style: TextStyle(
                    fontSize: 28.0,
                    color: Colors.redAccent,
                  ),
                ),
              ),
            ],
          ) :
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Text(
                  '${Utils.smartRound(coupon.valueAmount, 2)}',
                  style: TextStyle(
                    fontSize: 28.0,
                    color: Colors.redAccent,
                  ),
                ),
              ),
              Container(
                child: Text(
                  S.of(context).percent_discount,
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.redAccent,
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(
          child: Text(
            coupon.minAmount > 0 ?
            S.of(context).available_for_order_over_token(coupon.minAmount) :
            S.of(context).no_restriction,
            style: TextStyle(
              fontSize: 10.0,
              color: Colors.black26,
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    );

    row.children.add(valueColumn);
    column.children.add(row);
    column.children.add(Container(
      width: double.infinity,
      margin: EdgeInsets.only(top: 10.0, bottom: 0.0),
      padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 0.0),
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(
            width: 0.5,
            color: Colors.black12
          )
        )
      ),
      child: SizedBox.shrink(),
    ));

    column.children.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Text(
              coupon.expirationDate == null || coupon.expirationDate.length == 0 ?
                  S.of(context).no_expiration :
                  S.of(context).expiration_date_token(coupon.expirationDate),
              style: TextStyle(
                color: Colors.black26,
                fontSize: 15.0,
              ),
            ),
          ),
          Container(
            child: RaisedButton(
              color: Theme.of(context).primaryColor,
              child: Text(
                S.of(context).redeem_coupon,
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
              ),
              onPressed: () {
                if (coupon.store != null) {
                  Routes.router.navigateTo(context, '/shop/${coupon.store.id}/na/na/na');
                } else {
                  Routes.router.navigateTo(context, '/businesses');
                }
              },
            ),
          ),
        ],
      ),
    );

    return Container(
      margin: EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0, bottom: 5.0),
      padding: EdgeInsets.only(top: 20.0, bottom: 20.0, left: 10.0, right: 10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0),
          topRight: Radius.circular(10.0),
          bottomLeft: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0),
        ),
      ),
      child: column,
    );
  }

  @override
  void initState() {
    super.initState();
    coupons = null;
    HttpUtil.httpGet(
      'v1/coupons'
    ).then((data) {
      if (mounted) {
        setState(() {
          coupons =
              (data as List).map((e) => Coupon.fromJson(e)).toList();
        });
      }
    }).catchError((error) {
      Utils.showMessageDialog(context, error);
    });
  }

}