import 'package:flutter/material.dart';
import 'package:sendtrain/classes/media.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class MediaCard extends StatelessWidget {
  const MediaCard({super.key, required this.media});

  final Media media;

  @override
  Widget build(BuildContext context) {
    YoutubePlayerController controller = YoutubePlayerController(
        initialVideoId: media.reference,
        flags: const YoutubePlayerFlags(
            autoPlay: false, mute: true, showLiveFullscreenButton: false));

    DecorationImage mediaImage(Media media) {
      String image = '';

      if (media.type == "image") {
        image = media.reference;
      } else if (media.type == "youtube") {
        image = 'https://img.youtube.com/vi/${media.reference}/0.jpg';
      }

      return DecorationImage(image: NetworkImage(image), fit: BoxFit.cover);
    }

    Widget mediaItem(Media media) {
      if (media.type == "image") {
        return Image(image: NetworkImage(media.reference));
      } else if (media.type == "youtube") {
        return YoutubePlayer(
          controller: controller,
          aspectRatio: 16 / 9,
        );
      }

      return const Image(image: AssetImage('assets/images/placeholder.jpg'));
    }

    return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          image: mediaImage(media),
        ),
        child: Card(
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            shadowColor: const Color.fromARGB(0, 255, 255, 255),
            child: TextButton(
                onPressed: () => showDialog<String>(
                      context: context,
                      builder: (BuildContext context) => Dialog.fullscreen(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              mediaItem(media),
                              const SizedBox(height: 15),
                              Text(
                                '${media.description}',
                                style: const TextStyle(fontSize: 20),
                              ),
                              const Divider(
                                indent: 20,
                                endIndent: 20,
                                color: Colors.deepPurple,
                              ),
                              // const Text(
                              //   'Comments',
                              //   style: TextStyle(fontSize: 20),
                              // ),
                              const SizedBox(height: 15),
                              TextButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                child: const Text('Close'),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                child: const ListTile(
                  title: Text(''),
                ))));
  }
}