import 'package:anyway/constants.dart';
import 'package:anyway/main.dart';
import 'package:anyway/structs/trip.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:url_launcher/url_launcher.dart';

import 'package:anyway/structs/landmark.dart';

class LandmarkCard extends StatefulWidget {
  final Landmark landmark;
  final Trip parentTrip;
  
  LandmarkCard(
    this.landmark,
    this.parentTrip,
  );
  
  @override
  _LandmarkCardState createState() => _LandmarkCardState();
}


class _LandmarkCardState extends State<LandmarkCard> {
  @override
  Widget build(BuildContext context) {
    if (widget.landmark.type == typeStart || widget.landmark.type == typeFinish) {
      return TextButton.icon(
        onPressed: () {},
        icon: widget.landmark.type.icon,
        label: Text(widget.landmark.name),
      );

    }

    return Container(
      constraints: BoxConstraints(
        minHeight: 50,
        maxHeight: 200,
      ),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        elevation: 5,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        
        // if the image is available, display it on the left side of the card, otherwise only display the text
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Image and landmark "type" on the left
            AspectRatio(
              aspectRatio: 3 / 4,
              child: Column(
                children: [
                  if (widget.landmark.imageURL != null && widget.landmark.imageURL!.isNotEmpty)
                    Expanded(
                      child: CachedNetworkImage(
                        imageUrl: widget.landmark.imageURL!,
                        placeholder: (context, url) => Center(child: CircularProgressIndicator()),
                        errorWidget: (context, error, stackTrace) => Icon(Icons.question_mark_outlined),
                        fit: BoxFit.cover,
                      )
                    )
                  else
                    Expanded(
                      child: 
                      Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [GRADIENT_START, GRADIENT_END],
                          ),
                        ),
                        child: Center(
                          child: Icon(widget.landmark.type.icon.icon, size: 50),
                        ),
                      ),
                    ),

                  Container(
                    color: PRIMARY_COLOR,
                    child: Center(
                      child: Padding(
                        padding: EdgeInsets.all(5),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          spacing: 5,
                          children: [
                            Icon(widget.landmark.type.icon.icon, size: 16),
                            Text(widget.landmark.type.name, style: TextStyle(fontWeight: FontWeight.bold)),
                          ],
                        )
                      )
                    ),
                  )
                ],
              )
            ),

            // Main information, useful buttons on the right
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.landmark.name,
                      style: Theme.of(context).textTheme.titleMedium,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                    ),
                      
                    if (widget.landmark.nameEN != null)
                      Text(
                        widget.landmark.nameEN!,
                        style: Theme.of(context).textTheme.bodyMedium,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),

                    // fill the vspace
                    const Spacer(),

                    SingleChildScrollView(
                      // allows the buttons to be scrolled
                      scrollDirection: Axis.horizontal,
                      child: Wrap(
                        spacing: 10,
                        // show the type, the website, and the wikipedia link as buttons/labels in a row
                        children: [
                          doneToggleButton(),
                          // if (widget.landmark.duration != null && widget.landmark.duration!.inMinutes > 0)
                          //   TextButton.icon(
                          //     onPressed: () {},
                          //     icon: Icon(Icons.hourglass_bottom),
                          //     label: Text('${widget.landmark.duration!.inMinutes} minutes'),
                          //   ),
                          if (widget.landmark.websiteURL != null)
                            websiteButton(),
                          
                          optionsButton()
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        )
      )
    );
  }

  Widget doneToggleButton() {
    return TextButton.icon(
      onPressed: () async {
        widget.landmark.visited = !widget.landmark.visited;
        widget.parentTrip.notifyUpdate();
      },
      icon: Icon(widget.landmark.visited ? Icons.undo_sharp : Icons.check),
      label: Text(widget.landmark.visited ? "Add to overview" : "Done!"),
    );
  }

  Widget websiteButton () => TextButton.icon(
    onPressed: () async {
      // open a browser with the website link
      await launchUrl(Uri.parse(widget.landmark.websiteURL!));
    },
    icon: Icon(Icons.link),
    label: Text('Website'),
  );

  Widget optionsButton () => PopupMenuButton(
    icon: Icon(Icons.settings),
    style: TextButtonTheme.of(context).style,
    itemBuilder: (context) => [
      PopupMenuItem(
        child: ListTile(
          leading: Icon(Icons.delete),
          title: Text('Delete'),
          onTap: () async {
            widget.parentTrip.removeLandmark(widget.landmark);
            rootScaffoldMessengerKey.currentState!.showSnackBar(
              SnackBar(content: Text("We won't show ${widget.landmark.name} again"))
            );
          },
        ),
      ),
      PopupMenuItem(
        child: ListTile(
          leading: Icon(Icons.star),
          title: Text('Favorite'),
          onTap: () async {
            // delete the landmark
            // await deleteLandmark(widget.landmark);
          },
        ),
      ),
    ],
  );
}