import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:senyum_media/api/url.dart';
import 'package:senyum_media/detailitemcategori.dart';
import 'package:senyum_media/model/dataProduk.dart';
import 'package:flutter_html_view/flutter_html_view.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:zoomable_image/zoomable_image.dart';

class SecondDetailItem extends StatefulWidget {
  final DataProduk _dataProduk;
  final String id;
  SecondDetailItem(this._dataProduk, {this.id});
  @override
  _DetailProductDiscountState createState() => _DetailProductDiscountState();
}

class _DetailProductDiscountState extends State<SecondDetailItem> {
  var f = NumberFormat("#,##0", "en_US");
  @override
  final _list = List<DataProduk>();
  final _produkkategori = List<ProdukCategori>();

  String idUser = "";
  getPref() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    setState(() {
      idUser = preferences.getString("idUsers");
    });
  }

  var loading = false;
  productSejenis() async {
    _produkkategori.clear();
    setState(() {
      loading = true;
    });
    final response =
        await http.get(BaseUrl.otherProduct + widget._dataProduk.categoryId);
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      data.forEach((api) {
        final res = ProdukCategori(
            api['id'],
            api['code'],
            api['name'],
            api['description'],
            api['discount'],
            api['image_1'],
            api['image_2'],
            api['image_3'],
            api['price'],
            api['stock'],
            api['weight'],
            api['height'],
            api['width'],
            api['length'],
            api['category_id'],
            api['producer_id'],
            api['deleted_by']);
        setState(() {
          _produkkategori.add(res);
          loading = false;
        });
      });
    }
  }

  produkLainnya() async {
    _list.clear();
    setState(() {
      loading = true;
    });
    final response = await http.get(BaseUrl.showData);
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      data.forEach((api) {
        final res = DataProduk(
            api['id'],
            api['code'],
            api['name'],
            api['description'],
            api['discount'],
            api['image_1'],
            api['image_2'],
            api['image_3'],
            api['price'],
            api['stock'],
            api['weight'],
            api['height'],
            api['width'],
            api['length'],
            api['category_id'],
            api['producer_id'],
            api['deleted_by']);
        setState(() {
          _list.add(res);
          loading = false;
        });
      });
    }
  }

  addtoCart() async {
    final response = await http.post(BaseUrl.getCartId + idUser, body: {
      "product_id":
          widget._dataProduk.id == "" ? widget.id : widget._dataProduk.id,
      "qty": "1",
      "price": widget._dataProduk.price,
      "discount": widget._dataProduk.discount.toString()
    });
    final data = jsonDecode(response.body);
    int value = data['value'];
    String msg = data['message'];
    if (response.statusCode == 200) {
      print(msg);
    } else {
      print(msg);
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    produkLainnya();
    getPref();
    productSejenis();
  }

  @override
  Widget build(BuildContext context) {
    double a = double.parse(widget._dataProduk.price);

    double b = widget._dataProduk.discount != null
        ? double.parse(widget._dataProduk.discount)
        : 0.0;
    double c = widget._dataProduk.discount == null ? (a * 0) : (a * b);
    double d = (a - c);
    int price = d.toInt();
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool inner) {
          return <Widget>[
            SliverAppBar(
              leading: IconButton(
                icon: Icon(
                  Icons.arrow_back,
                  color: Colors.black38,
                ),
                onPressed: () => Navigator.pop(context),
              ),
              backgroundColor: Colors.white,
              expandedHeight: 200,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  width: double.infinity,
                  color: Colors.white,
                  child: Carousel(
                    autoplay: false,
                    boxFit: BoxFit.scaleDown,
                    dotSize: 4,
                    indicatorBgPadding: 4,
                    images: [
                      new NetworkImage(
                          BaseUrl.urlImgProduk + widget._dataProduk.image_1),
                      NetworkImage(
                          BaseUrl.urlImgProduk + widget._dataProduk.image_2),
                      NetworkImage(
                          BaseUrl.urlImgProduk + widget._dataProduk.image_0),
                    ],
                  ),
                ),
              ),
            )
          ];
        },
        body: ListView(
          padding: const EdgeInsets.all(0),
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(4.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Card(
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      width: double.infinity,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            widget._dataProduk.name,
                            style: TextStyle(
                                fontSize: 20, fontWeight: FontWeight.w600),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                          Padding(padding: const EdgeInsets.all(4.0)),
                          Text("KODE PRODUK : " +
                              widget._dataProduk.code.toString()),
                          Padding(padding: const EdgeInsets.all(4.0)),
                          Text("Rp " + f.format(price)),
                          Padding(padding: const EdgeInsets.all(4.0)),
                          widget._dataProduk.stock != "0"
                              ? Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.check_circle,
                                      color: Colors.green,
                                      size: 15,
                                    ),
                                    Padding(padding: const EdgeInsets.all(4.0)),
                                    Text("Stock Tersedia")
                                  ],
                                )
                              : Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.cancel,
                                      color: Colors.redAccent,
                                      size: 15,
                                    ),
                                    Padding(padding: const EdgeInsets.all(4.0)),
                                    Text("Stock Tidak Tersedia")
                                  ],
                                )
                        ],
                      ),
                    ),
                  ),
                  Card(
                    child: Container(
                      child: Column(
                        children: <Widget>[
                          DefaultTabController(
                            length: 2,
                            child: Column(
                              children: <Widget>[
                                TabBar(
                                  labelColor: Colors.black,
                                  tabs: <Widget>[
                                    Tab(
                                      text: "Deskripsi",
                                    ),
                                    Tab(
                                      text: "Spesifikasi",
                                    )
                                  ],
                                ),
                                Container(
                                  height: 200,
                                  child: TabBarView(
                                    physics: NeverScrollableScrollPhysics(),
                                    children: <Widget>[
                                      Container(
                                        padding: const EdgeInsets.all(8.0),
                                        child: HtmlView(
                                          data: widget._dataProduk.description,
                                        ),
                                      ),
                                      Container(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Row(
                                            children: <Widget>[
                                              Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text("panjang "),
                                                  Text("lebar "),
                                                  Text("tinggi "),
                                                  Text("berat "),
                                                ],
                                              ),
                                              Column(
                                                children: <Widget>[
                                                  Text(": "),
                                                  Text(": "),
                                                  Text(": "),
                                                  Text(": ")
                                                ],
                                              ),
                                              Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text(widget._dataProduk.length
                                                      .toString()),
                                                  Text(widget._dataProduk.width
                                                      .toString()),
                                                  Text(widget._dataProduk.height
                                                      .toString()),
                                                  Text(widget._dataProduk.weight
                                                          .toString() +
                                                      " kg"),
                                                ],
                                              ),
                                            ],
                                          ))
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Card(
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("PRODUK SEJENIS"),
                        ),
                        Container(
                            height: 200,
                            child: loading != true
                                ? ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: _produkkategori.length <= 6
                                        ? _produkkategori.length
                                        : _produkkategori.length = 6,
                                    itemBuilder: (context, i) {
                                      final x = _produkkategori[i];
                                      return GestureDetector(
                                        onTap: () => Navigator.of(context)
                                            .pushReplacement(MaterialPageRoute(
                                                builder:
                                                    (BuildContext context) =>
                                                        DetailItemCategory(x))),
                                        child: widget._dataProduk.id == x.id
                                            ? Container(
                                                height: 0,
                                                width: 0,
                                              )
                                            : Card(
                                                child: Container(
                                                    height: 150,
                                                    width: 130,
                                                    child: Column(
                                                      children: <Widget>[
                                                        Stack(
                                                          children: <Widget>[
                                                            Container(
                                                              height: 100,
                                                              width: 100,
                                                              decoration: BoxDecoration(
                                                                  borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                              10),
                                                                  image: DecorationImage(
                                                                      image: NetworkImage(
                                                                          BaseUrl.urlImgProduk +
                                                                              x.image_1))),
                                                            ),
                                                            x.stock == "0" ?Opacity(
                                                              opacity: 0.35,
                                                              child: Container(
                                                                height: 100,
                                                                width: 100,
                                                                decoration: BoxDecoration(
                                                                  borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                              10),
                                                                color: Colors
                                                                    .red[100],),
                                                                child: Center(
                                                                  child: Text(
                                                                      "Stock Tidak Tersedia", textAlign: TextAlign.center,)
                                                                ),
                                                              ),
                                                            ) : Container()
                                                          ],
                                                        ),
                                                        Container(
                                                          child: Column(
                                                            children: <Widget>[
                                                              Text(
                                                                x.name,
                                                                style:
                                                                    TextStyle(
                                                                  fontSize: 16,
                                                                ),
                                                                textAlign:
                                                                    TextAlign
                                                                        .center,
                                                                maxLines: 2,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              ),
                                                              Text(
                                                                "\nRp " +
                                                                    f.format(int
                                                                        .parse(x
                                                                            .price)),
                                                                style:
                                                                    TextStyle(
                                                                  fontSize: 14,
                                                                ),
                                                                maxLines: 2,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              )
                                                            ],
                                                          ),
                                                        )
                                                      ],
                                                    )),
                                              ),
                                      );
                                    },
                                  )
                                : Center(child: CircularProgressIndicator()))
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("PRODUK LAINNYA"),
                        ),
                        Container(
                            height: 200,
                            child: loading != true
                                ? ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: _list.length <= 6
                                        ? _list.length
                                        : _list.length = 6,
                                    itemBuilder: (context, i) {
                                      final x = _list[i];
                                      return GestureDetector(
                                        onTap: () => Navigator.of(context)
                                            .pushReplacement(MaterialPageRoute(
                                                builder:
                                                    (BuildContext context) =>
                                                        SecondDetailItem(x))),
                                        child: widget._dataProduk.id == x.id
                                            ? Container(
                                                height: 0,
                                                width: 0,
                                              )
                                            : Card(
                                                child: Container(
                                                    height: 150,
                                                    width: 130,
                                                    child: Column(
                                                      children: <Widget>[
                                                        Container(
                                                          height: 100,
                                                          width: 100,
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          10),
                                                              image: DecorationImage(
                                                                  image: NetworkImage(
                                                                      BaseUrl.urlImgProduk +
                                                                          x.image_1))),
                                                        ),
                                                        Container(
                                                          child: Column(
                                                            children: <Widget>[
                                                              Text(
                                                                x.name,
                                                                style:
                                                                    TextStyle(
                                                                  fontSize: 16,
                                                                ),
                                                                textAlign:
                                                                    TextAlign
                                                                        .center,
                                                                maxLines: 2,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              ),
                                                              Text(
                                                                "\nRp " +
                                                                    f.format(int
                                                                        .parse(x
                                                                            .price)),
                                                                style:
                                                                    TextStyle(
                                                                  fontSize: 14,
                                                                ),
                                                                maxLines: 2,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              )
                                                            ],
                                                          ),
                                                        )
                                                      ],
                                                    )),
                                              ),
                                      );
                                    },
                                  )
                                : Center(child: CircularProgressIndicator()))
                      ],
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              child: Text(
                "Rp " + f.format(price),
                style: TextStyle(color: Colors.blue, fontSize: 16),
              ),
            ),
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                addtoCart();
              },
              child: Text(
                "BELI",
                style: TextStyle(color: Colors.white),
              ),
            )
          ],
        ),
        decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black26,
          )
        ]),
      ),
    );
  }
}