import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sonnat/core/extensions/context_extension.dart';
import 'package:sonnat/core/extensions/string_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/core/utils/app_utils.dart';
import 'package:sonnat/core/utils/base_cubit_type.dart';
import 'package:sonnat/features/single_post/cubit/single_post_cubit.dart';
import 'package:sonnat/features/single_post/widget/add_comment_widget.dart';
import 'package:sonnat/features/single_post/widget/post_comment_widget.dart';

class SinglePostScreen extends StatefulWidget {
  final int postId;

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

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

class _SinglePostScreenState extends State<SinglePostScreen> {
  late final SinglePostCubit _cubit;
  bool _loading = true;

  @override
  void initState() {
    _cubit = BlocProvider.of<SinglePostCubit>(context);
    _cubit.getSinglePostData(postId: widget.postId);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: BlocBuilder<SinglePostCubit, BaseCubitType<SinglePostState>>(
          builder: (context, state) {
            switch (state.eventName!) {
              case SinglePostState.empty:
                break;
              case SinglePostState.data:
                _loading = false;
                break;
              case SinglePostState.loading:
                _loading = true;
                break;
              case SinglePostState.error:
                _loading = false;
                break;
            }
            if(_loading) {
              return const Center(child: CircularProgressIndicator());
            }
            return SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(
                    height: 304,
                    child: Stack(
                      fit: StackFit.expand,
                      children: [
                        Image.network(
                          _cubit.model!.thumbnail ?? '',
                          fit: BoxFit.cover,
                        ),
                        PositionedDirectional(
                          end: 16,
                          top: 16,
                          child: GestureDetector(
                            onTap: () {
                              Navigator.pop(context);
                            },
                            child: const Icon(
                              Icons.arrow_forward_rounded,
                              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: EdgeInsetsDirectional.only(
                            start: context.width * 26 / AppConstants.instance.appWidth,
                            end: context.width * 37 / AppConstants.instance.appWidth,
                            bottom: 18,
                          ),
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Row(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: SvgPicture.asset('ic_share'.svgPath),
                                ),
                                const Spacer(),
                                Text(
                                  _cubit.commentList.length.toString(),
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: SvgPicture.asset('ic_comment'.svgPath),
                                ),
                                const SizedBox(width: 21),
                                const Text(
                                  '29',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: SvgPicture.asset('ic_view'.svgPath),
                                ),
                              ],
                            ),
                          ),
                        ),
                        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,
                      top: 16,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          _cubit.model!.title,
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                        Text(
                          Utils.instance.dateToString(DateTime.parse(_cubit.model!.publishDate).millisecondsSinceEpoch),
                          style: const TextStyle(fontSize: 11),
                        ),
                        HTMLViewer(
                          htmlContent: _cubit.model!.content,
                          fontSizeFactor: 1,
                        ),
                        const SizedBox(height: 30),
                        Container(
                          width: context.width,
                          height: 1,
                          color: const Color(0xffD3D8E9),
                        ),
                        const SizedBox(height: 30),
                        AddCommentWidget(sendComment: _cubit.addComment),
                        if (_cubit.commentList.isEmpty) const SizedBox(height: 30),
                        const SizedBox(height: 8),
                        ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index) {
                            return PostCommentWidget(comment: _cubit.commentList[index]);
                          },
                          itemCount: _cubit.commentList.length,
                        ),
                        if (_cubit.commentList.isNotEmpty)
                          Padding(
                            padding: const EdgeInsets.only(top: 15, bottom: 30),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  Translator.translate('show_all_comments'),
                                  style: const TextStyle(
                                    fontSize: 10,
                                    color: Color(0xff404966),
                                  ),
                                ),
                                const SizedBox(width: 4),
                                SvgPicture.asset(
                                  'ic_arrow_down'.svgPath,
                                  width: 8,
                                  height: 5,
                                ),
                              ],
                            ),
                          ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}