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

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

class ProductItem extends StatefulWidget {
  final Business business;
  final Product product;
  final bool horizontal;

  const ProductItem(this.product, this.business, {Key key, this.horizontal = false}) : super(key: key);

  @override
  State<StatefulWidget> createState() => ProductItemState();

}

class ProductItemState extends State<ProductItem> {

  @override
  Widget build(BuildContext context) {
    return HoverWidget(
        child: Container(
          width: 160.0,
          height: widget.horizontal ? 160 : 268.0,
          padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 15.0).copyWith(bottom: 5.0),
          decoration: new BoxDecoration(
            color: Colors.white,
            border: new Border(
              bottom: new BorderSide(
                color: new Color(0xFFEBEBEB),
              ),
            ),
          ),
          child: new SizedBox.expand(
            child: Container(
              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
              child: widget.horizontal ? getHorizontal(false) : getVertial(false),
            ),
          ),
        ),
        hoverChild: Container(
          width: 160.0,
          height: widget.horizontal ? 160 : 268.0,
          padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 15.0).copyWith(bottom: 5.0),
          decoration: new BoxDecoration(
            color: Colors.white,
            border: new Border(
              top: new BorderSide(
                color: new Color(0xFFEBEBEB),
              ),
              left: new BorderSide(
                color: new Color(0xFFEBEBEB),
              ),
              right: new BorderSide(
                color: new Color(0xFFEBEBEB),
              ),
              bottom: new BorderSide(
                color: new Color(0xFFBBBBBB),
              ),
            ),
          ),
          child: new SizedBox.expand(
            child: Container(
              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
              child: widget.horizontal ? getHorizontal(true) : getVertial(true),
            ),
          ),
        ),
        onHover: (event) {

        }
    );
  }

  Widget getHorizontal(bool onHover) {
    return Row(
      children: [
        Container(
          margin: new EdgeInsets.all(10.0),
          width: 110.0,
          height: 110.0,
          child: GestureDetector(
            child: onHover && widget.product.secondImagePath.isNotEmpty ?
            Util.showImage('${widget.product.secondImagePath}',
              fit: BoxFit.fill,
            ) :
            Util.showImage('${widget.product.imagePath}',
              fit: BoxFit.fill,
            ),
            onTap: (){
              _showProductDetail();
            },
          ),
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            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();
                  },
                ),
              ),
              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(),
                      ),
                      ShowPrice(
                        widget.product.price,
                        regularPrice: widget.product.regularPrice,
                        currencySign: '\$',
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                  AddRemoveButton(product: widget.product, business: widget.business, addOnly: false, onHovor: onHover,),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget getVertial(bool onHover) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Container(
          margin: new EdgeInsets.all(10.0),
          width: 110.0,
          height: 110.0,
          child: GestureDetector(
            child: onHover && widget.product.secondImagePath.isNotEmpty ?
            Util.showImage('${widget.product.secondImagePath}',
              fit: BoxFit.fill,
            ) :
            Util.showImage('${widget.product.imagePath}',
              fit: BoxFit.fill,
            ),
            onTap: (){
              _showProductDetail();
            },
          ),
        ),
        new Expanded(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            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();
                  },
                ),
              ),
              Container(
                child: 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(),
                      ),
                      ShowPrice(
                        widget.product.price,
                        regularPrice: widget.product.regularPrice,
                        currencySign: '\$',
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                  AddRemoveButton(product: widget.product, business: widget.business, addOnly: false, onHovor: onHover,),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

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

  @override
  void initState() {
    super.initState();
    eventBus.on<OnCartInfoUpdated>().listen((event) {
      if (mounted) {
        setState(() {

        });
      }
    });
  }
}