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

import '../../generated/l10n.dart';
import '../../models/business.dart';
import '../../models/product.dart';
import '../../pages/product_detail_page.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';
import '../../widgets/general/add_remove_button.dart';
import '../../widgets/general/show_price.dart';
import '../../widgets/general/style.dart';

class MobileProductItem extends StatefulWidget {
  final Product product;
  final Business business;

  MobileProductItem({this.product, this.business, Key key})
    : super(key: key);

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

class MobileProductItemState extends State<MobileProductItem> {
  int _qty = 0;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 124.0,
      padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 15.0).copyWith(bottom: 5.0),
      decoration: new BoxDecoration(
        color: Style.backgroundColor,
        border: new Border(
          bottom: new BorderSide(
            color: new Color(0xFFEBEBEB),
          )
        ),
      ),
      child: new SizedBox.expand(
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.only(right: 10.0),
              width: 80.0,
              height: 80.0,
              child: GestureDetector(
                child: Util.showImage('${widget.product.imagePath}',
                  fit: BoxFit.fill,
                ),
                onTap: (){
                  _showProductDetail();
                },
              ),
            ),
            new Expanded(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    child: GestureDetector(
                      child: Text(
                        '${widget.product.name}',
//                        overflow: kIsWeb ? null : TextOverflow.ellipsis,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        softWrap: true,
                        style: new TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                      onTap: (){
                        _showProductDetail();
                      },
                    ),
                  ),
                  new Text(
                    widget.product.description,
//                    overflow: kIsWeb ? null : TextOverflow.ellipsis,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                    style: new TextStyle(
                      fontSize: 12.0,
                      color: new Color(0xFF999999),
                    ),
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Container(
                            child: widget.business.showMonthlySold ?
                            Text(
                              S.of(context).sold_per_month_token(widget.product.monthSales.toStringAsFixed(0)),
                              style: new TextStyle(
                                  fontSize: 9.0
                              ),
                            ) : SizedBox.shrink(),
                          ),
                          new Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.baseline,
                            textBaseline: TextBaseline.alphabetic,
                            children: <Widget>[
                              ShowPrice(
                                widget.product.price,
                                regularPrice: widget.product.regularPrice,
                                currencySign: '\$',
                              ),
                            ],
                          ),
                        ],
                      ),
                      new AddRemoveButton(product: widget.product, business: widget.business, addOnly: false,),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

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