import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_wisetronic/widgets/general/show_price.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/style.dart';
import 'desktop_product_detail_page.dart';

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

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

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

class DesktopProductItemState extends State<DesktopProductItem> {
  int _qty = 0;

  @override
  Widget build(BuildContext context) {
    return new 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: Style.backgroundColor,
        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() : getVertial(),
        ),
      ),
    );
  }

  Widget getHorizontal() {
    return Row(
      children: [
        Container(
          margin: new EdgeInsets.all(10.0),
          width: 110.0,
          height: 110.0,
          child: GestureDetector(
            child: 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,
                      ),
                    ],
                  ),
                  new AddRemoveButton(product: widget.product, business: widget.business, addOnly: false,),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget getVertial() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Container(
          margin: new EdgeInsets.all(10.0),
          width: 110.0,
          height: 110.0,
          child: GestureDetector(
            child: 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,
                      ),
                    ],
                  ),
                  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,
          )),
    );
  }
}