import 'package:cached_network_image/cached_network_image.dart';
import 'package:diabretes/viewmodels/post_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:google_fonts/google_fonts.dart';

class PostContentPage extends StatelessWidget {
  const PostContentPage(
      {Key? key, required this.viewModel, required this.popCallback})
      : super(key: key);

  final PostViewModel viewModel;
  final Function popCallback;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
            backgroundColor: Color(0xFFE1E1E1),
            extendBodyBehindAppBar: true,
            appBar: AppBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
              brightness: Brightness.dark,
            ),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Stack(
                  children: [
                    Container(
                      child: CachedNetworkImage(
                        imageUrl: viewModel.itemImageURL,
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.width * 0.56,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        height: (MediaQuery.of(context).size.width * 1) * 1.3,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Color(0xBF202020), Color(0x3A202020)],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                        )),
                  ],
                ),
                Flexible(
                  child: SingleChildScrollView(
                    padding: EdgeInsets.only(top: 24, left: 24, right: 24),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(viewModel.itemDate,
                            style: GoogleFonts.cabin(
                                color: Color(0xFF777777),
                                fontSize: FontSize.small.size,
                                height: 1.2,
                                fontWeight: FontWeight.w500)),
                        SizedBox(height: 12),
                        Text(viewModel.itemTitle,
                            style: GoogleFonts.cabin(
                                color: Color(0xFF202020),
                                fontSize: FontSize.xLarge.size,
                                fontWeight: FontWeight.w700)),
                        SizedBox(height: 8),
                        Html(data: viewModel.itemContentText, style: {
                          "body": Style(
                              color: Color(0xFF202020),
                              margin: EdgeInsets.zero,
                              padding: EdgeInsets.zero,
                              fontFamily: "Cabin-Regular",
                              fontWeight: FontWeight.w400,
                              fontSize: FontSize.large,
                              lineHeight: LineHeight(1.5))
                        })
                      ],
                    ),
                  ),
                )
              ],
            )),
        onWillPop: () async {
          popCallback();
          Navigator.of(context).pop(true);
          return true;
        });
  }
}