import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hum/core/constants/app_text.dart';
import 'package:hum/core/constants/app_theme.dart';
import 'package:hum/services/firestore_api.dart';
import 'package:hum/widgets/widget_buttons.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';

class ViewListingsItem extends StatefulWidget {
  final String itemID;
  final String thumbnailURL;
  final Map<dynamic, dynamic> itemData;
  const ViewListingsItem({
    super.key,
    required this.itemID,
    required this.thumbnailURL,
    required this.itemData,
  });

  @override
  State<ViewListingsItem> createState() => _ViewListingState();
}

class _ViewListingState extends State<ViewListingsItem> {
  late final Map<String, dynamic> itemData;
  String title = '';

  void setItemDetails() async {
    Map<String, dynamic> dbItemData = (await dbGetItemById(widget.itemID))!;
    setState(() {
      itemData = dbItemData;
      title = itemData['title'];
    });
  }

  @override
  void initState() {
    // setItemDetails();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final cardRadius = 16.0;
    // print(widget.itemData);
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        automaticallyImplyLeading: true,
        leading: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Row(
            children: [
              PhosphorIcon(
                PhosphorIconsRegular.caretLeft,
                size: 26,
                // color: Colors.green,
                // size: 30.0,
              ),
              Text(doneBack),
            ],
          ),
          onPressed: () {
            Navigator.of(context).maybePop();
          },
        ),
      ),
      child: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child: Hero(
                        tag: widget.itemID,
                        child: ClipRRect(
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(cardRadius),
                            topRight: Radius.circular(cardRadius),
                            bottomLeft: Radius.circular(cardRadius),
                            bottomRight: Radius.circular(cardRadius),
                          ),
                          child: SizedBox(
                            width: double.infinity,
                            height: 340,
                            child: CachedNetworkImage(
                              imageUrl: widget.thumbnailURL,
                              fit: BoxFit.cover,
                              memCacheHeight: 1500,
                              fadeInDuration: Duration.zero,
                              fadeOutDuration: Duration.zero,
                              placeholderFadeInDuration: Duration.zero,
                              placeholder: (context, url) {
                                // Try to use the cached thumbnail as placeholder
                                return Image(
                                  image: CachedNetworkImageProvider(widget.thumbnailURL),
                                  fit: BoxFit.cover,
                                  errorBuilder: (context, error, stackTrace) {
                                    return Center(child: CupertinoActivityIndicator());
                                  },
                                );
                              },
                              errorWidget: (context, url, error) =>
                                  Center(child: Icon(CupertinoIcons.photo, size: 48)),
                            ),
                          ),
                        ),
                      ),
                    ),

                    // Hero(
                    //   tag: widget.itemID,
                    //   child: SizedBox(
                    //     width: double.infinity,
                    //     height: 300,
                    //     child: CachedNetworkImage(
                    //       imageUrl: widget.thumbnailURL,
                    //       fit: BoxFit.cover,
                    //       placeholder: (context, url) =>
                    //           Center(child: CupertinoActivityIndicator()),
                    //     ),
                    //   ),
                    // ),
                    Padding(
                      padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 30),
                      child: Column(
                        spacing: 16,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            spacing: 16,
                            children: [
                              Expanded(
                                child: Text(
                                  widget.itemData['title'],
                                  overflow: TextOverflow.visible,
                                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                                ),
                              ),

                              // Text(widget.itemData['price_per_day'].toString()),
                              Text(
                                '\$${widget.itemData['price_per_day']} / day',
                                style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                  color: CupertinoColors.activeBlue,
                                ),
                              ),
                            ],
                          ),

                          Opacity(opacity: 0.6, child: Text(widget.itemData['description'])),

                          Padding(
                            padding: const EdgeInsets.only(top: 12.0),
                            child: Text(
                              listingLabelCondition,
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                          ),

                          Row(
                            spacing: 10,
                            children: [
                              PhosphorIcon(
                                PhosphorIconsFill.star,
                                size: 20,
                                color: CupertinoColors.systemYellow,
                                // size: 30.0,
                              ),
                              Text(listingLabelCondition),
                            ],
                          ),

                          Padding(
                            padding: const EdgeInsets.only(top: 12.0),
                            child: Text(
                              listingLabelFeatures,
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                          ),

                          Column(
                            spacing: 4,
                            children: [
                              ...widget.itemData['features'].map<Widget>((feature) {
                                return Row(
                                  spacing: 10,
                                  children: [
                                    PhosphorIcon(
                                      PhosphorIconsFill.checkCircle,
                                      size: 20,
                                      color: CupertinoColors.activeGreen,
                                      // size: 30.0,
                                    ),
                                    Text(feature),
                                  ],
                                );
                              }).toList(),
                            ],
                          ),

                          Padding(
                            padding: const EdgeInsets.only(top: 12.0),
                            child: Text(
                              listingLabelOwner,
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                          ),

                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            spacing: 10,
                            children: [
                              CircleAvatar(radius: 25),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('Jon Dow'),
                                  Row(
                                    spacing: 4,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      PhosphorIcon(
                                        PhosphorIconsFill.star,
                                        size: 16,
                                        color: CupertinoColors.systemYellow,
                                        // size: 30.0,
                                      ),
                                      Text(
                                        '4.5',
                                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),

            Container(
              width: double.infinity,
              height: 60,
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                spacing: 8,
                children: [
                  Expanded(
                    child: BTNFilledIcon(
                      color: CupertinoDynamicColor.resolve(colorBarButton, context),
                      text: listingActionMessage,
                      icon: PhosphorIconsDuotone.chatCircle,
                      alignment: MainAxisAlignment.center,
                      action: () {},
                    ),
                  ),
                  Expanded(
                    child: BTNFilledIcon(
                      text: listingActionRent,
                      icon: PhosphorIconsDuotone.calendarPlus,
                      alignment: MainAxisAlignment.center,
                      action: () {},
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
