import 'package:buypeeb_mobile/models/user_listings.dart';
import 'package:sprintf/sprintf.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
import 'dart:collection';


class RouteViewListing extends StatefulWidget {
  @override
  _RouteViewListingState createState() => _RouteViewListingState();
}

class _RouteViewListingState extends State<RouteViewListing> {
  @override
  Widget build(BuildContext context) {
    final String id = ModalRoute.of(context).settings.arguments;
    var listings = context.watch<UserListings>();
    var thisListing = listings.items[id];
    final text = <Text>{};
    final Map<Text, Widget> listingInfo = {
      Text("ID"): Text(id),
      Text("Price"): Text("¥${thisListing.price}"),
      Text("Price (AUD)"): Text(sprintf("≈\$%2.2f", [thisListing.getLocalPrice()])),
      Text("Ending in"): Text("3 days, 01:23:45"),
      Text("Bids"): Text("7"),
      Text('"Buy it now" available'): true ? Icon(Icons.check_circle) : Icon(Icons.cancel),
      Text("Auto extension"): true ? Icon(Icons.check_circle) : Icon(Icons.cancel),
    };
    final Map<Text, Widget> listingActions = {
      Text("Favourite"): true ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
      Text("Share") : Icon(Icons.share),
      Text("Rename") : Icon(Icons.edit),
      Text("View on Buyee") : Icon(Icons.web),
      Text("View on Yahoo! Auctions Japan") : Icon(Icons.web),
      Text("Delete") : Icon(Icons.delete),
    };

    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverOverlapAbsorber(
            sliver: SliverSafeArea(
              top: false,
              sliver: SliverAppBar(
                pinned: true,

                // based on https://api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html
                flexibleSpace: FlexibleSpaceBar(
                  stretchModes: [
                    StretchMode.blurBackground,
                    StretchMode.fadeTitle,
                  ],
                  title: Text(
                    thisListing.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  centerTitle: true,
                  // titlePadding: const EdgeInsetsDirectional.only(bottom: 16, end: 150),
                  background: Stack(
                    fit: StackFit.expand,
                    children: [
                      FadeInImage.memoryNetwork(
                        placeholder: kTransparentImage,
                        image: thisListing.imageUrl,
                        fit: BoxFit.cover,
                      ),
                      const DecoratedBox(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment(0.0, 0.5),
                            end: Alignment(0.0, 0.0),
                            colors: <Color>[
                              Color(0x60000000),
                              Color(0x00000000),
                            ],
                          )
                        )
                      )
                    ]
                  )
                ),
                expandedHeight: 200,
                automaticallyImplyLeading: false, // remove the useless back button
              ),
            ),
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          ),
        ],
        body:
          ListView.separated(
            itemBuilder: (context, i) {
              if (i == 0) {
                return ListTile(
                  visualDensity: VisualDensity.compact,
                  title: Text(
                    "About this listing",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  )
                );
              } else if (i > 0 && i <= listingInfo.length) {
                // subtract one to account for the "About this listing" tile at the start of the list
                i = i - 1;
                var key = listingInfo.keys.elementAt(i);
                return ListTile(
                  visualDensity: VisualDensity.compact,
                  title: key,
                  trailing: listingInfo[key],
                );
              } else if (i == listingInfo.length + 1) {
                return ListTile(
                  visualDensity: VisualDensity.compact,
                  title: Text(
                    "Actions",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    )
                  )
                );
              } else if (i > listingInfo.length + 1 && i <= listingInfo.length + 1 + listingActions.length) {
                // subtract 2 (one for each header), and the length of listingInfo, to account for the previous stuff
                i = i - listingInfo.length - 2;
                var key = listingActions.keys.elementAt(i);
                return ListTile(
                  visualDensity: VisualDensity.compact,
                  title: key,
                  trailing: listingActions[key],
                );
              } else {
                return ListTile(title: Text("???"));
              }
            },
            separatorBuilder: (context, i) => new Divider(),
            itemCount: listingInfo.length + listingActions.length + 2
          )
      )
    );
  }
}