import 'package:flutter/material.dart';
import '../../generated/l10n.dart';
import '../../pages/product_detail_page.dart';
import '../../widgets/general/add_remove_button.dart';
import '../../widgets/general/show_price.dart';

import '../../models/business.dart';
import '../../models/product.dart';
import '../../utils/util_io.dart' if (dart.library.html) '../../utils/util_web.dart';

class ShopPromote extends StatefulWidget {
  final dynamic data;

  const ShopPromote(this.data, {Key key}): super(key: key);

  @override
  State<StatefulWidget> createState() => ShopPromoteState();
}

class ShopPromoteState extends State<ShopPromote> {
  double sideSpace = 0;
  double mainSpace = 1200;

  Business _business;

  @override
  Widget build(BuildContext context) {
    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;
    }

    Row promoteRow = getPromoteRow();
    if (promoteRow.children.length > 0) {
      return Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: sideSpace,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: EdgeInsets.only(top: 12, bottom: 6),
                    child: Text(
                      S.of(context).promotions,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(bottom: 10),
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: promoteRow,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: sideSpace,
            ),
          ],
        ),
      );
    } else {
      return SizedBox.shrink();
    }
  }

  @override
  void initState() {
    super.initState();
    _business = Business.fromJson(widget.data['business']);
  }

  Row getPromoteRow() {
    Row promotRow = Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[],
    );
    for (var i = 0; i < _business.promoProducts.length; i++) {
      promotRow.children.add(Container(
        padding: EdgeInsets.only(
          left: 10.0,
          top: 10.0,
          bottom: 10.0,
          right: 10.0,
        ),
        margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
        width: 220.0,
        height: 220.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          color: Colors.white,
          border: Border(
            top: BorderSide(
              width: 1.0,
              color: Colors.black12,
            ),
            bottom: BorderSide(
              width: 1.0,
              color: Colors.black12,
            ),
            left: BorderSide(
              width: 1.0,
              color: Colors.black12,
            ),
            right: BorderSide(
              width: 1.0,
              color: Colors.black12,
            ),
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            GestureDetector(
              child: Container(
                child: Util.showImage(
                  _business.promoProducts[i].imagePath,
                  width: 120.0,
                ),
              ),
              onTap: () {
                _showProductDetail(_business.promoProducts[i]);
              },
            ),
            Container(
              child: Text(
                _business.promoProducts[i].name,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 14.0),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                ShowPrice(
                  _business.promoProducts[i].price,
                  currencySign: '\$',
                  fontWeight: FontWeight.bold,
                  smallFontSize: 15,
                  largeFontSize: 24,
                  regularPrice: _business.promoProducts[i].regularPrice,
                ),
                Container(
                  child: AddRemoveButton(
                    product: _business.promoProducts[i],
                    business: _business,
                    addOnly: true,
                  ),
                )
              ],
            )
          ],
        ),
      ));
    }
    return promotRow;
  }

  void _showProductDetail(Product p) {
    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => ProductDetailPage(
            product: p,
            business: _business,
          )),
    );
  }
}