import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:sonnat/core/extensions/context_extension.dart';
import 'package:sonnat/core/html/html_viewer.dart';
import 'package:sonnat/core/language/translator.dart';
import 'package:sonnat/core/utils/app_constants.dart';
import 'package:sonnat/features/single_post/view_models/post.dart';

class SinglePostScreen extends StatefulWidget {
  final Post post;

  const SinglePostScreen({super.key, required this.post});

  @override
  State<SinglePostScreen> createState() => _SinglePostScreenState();
}

class _SinglePostScreenState extends State<SinglePostScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Stack(
              fit: StackFit.expand,
              children: [
                CachedNetworkImage(
                  imageUrl: widget.post.thumbnail?.lg ?? '',
                  fit: BoxFit.cover,
                  errorWidget: (context, url, error) {
                    return const Icon(
                      Icons.wifi_off,
                      size: 80,
                      color: Colors.black54,
                    );
                  },
                  placeholder: (context, url) => Shimmer.fromColors(
                    baseColor: Colors.grey.shade300,
                    highlightColor: Colors.grey.shade100,
                    child: Container(color: Colors.white),
                  ),
                ),
                const Positioned(
                  top: 0,
                  left: 8,
                  right: 8,
                  child: Row(
                    children: <Widget>[
                      BackButton(color: Colors.white),
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    height: 150,
                    width: 1,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                        colors: [
                          Colors.black.withOpacity(0.7),
                          Colors.black.withOpacity(0),
                        ],
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Row(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8),
                          child: ClipOval(
                            child: CachedNetworkImage(
                              imageUrl: /*post.thumbnail?.sm ??*/ '',
                              height: 30,
                              width: 30,
                              errorWidget: (context, url, error) {
                                return Image.asset(
                                  'assets/images/png/avatar.jpg',
                                  cacheWidth: 30 ~/ 1,
                                  cacheHeight: 30 ~/ 1,
                                );
                              },
                              placeholder: (context, url) => Shimmer.fromColors(
                                baseColor: Colors.grey.shade300,
                                highlightColor: Colors.grey.shade100,
                                child: Container(color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                        Text(
                          "${Translator.translate('author')} : ${widget.post.author ?? ""}",
                          style: const TextStyle(fontSize: 10),
                        ),
                      ],
                    ),
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.all(8),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [],
                    ),
                  ),
                ),
              ],
            ),
            Padding(
              padding: EdgeInsetsDirectional.only(
                start: context.width * 26 / AppConstants.instance.appWidth,
                end: context.width * 37 / AppConstants.instance.appWidth,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'عدم بیعت صحابه با ابوبکر+سند',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                  const Text(
                    '1404/12/25',
                    style: TextStyle(fontSize: 11),
                  ),
                  HTMLViewer(
                    htmlContent: widget.post.content ?? '',
                    fontSizeFactor: 1,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}