import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:huixiang/utils/flutter_utils.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:huixiang/view_widget/icon_text.dart';
import 'package:huixiang/view_widget/round_button.dart';

class HotArticleItem extends StatefulWidget {
  final Article article;
  final bool isHot;

  HotArticleItem({this.article, this.isHot});

  @override
  State<StatefulWidget> createState() {
    return _HotArticleItem();
  }
}

class _HotArticleItem extends State<HotArticleItem> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        click();
      },
      child: hotItem(context),
    );
  }

  click() async {
    await Navigator.of(context).pushNamed('/router/web_page',
        arguments: {"articleId": widget.article.id});
    widget.article.viewers = (widget.article.viewers + 1);
    setState(() {});
  }

  Widget hotItem(BuildContext context) {
    return Container(
      padding: EdgeInsets.all((widget.isHot == null || !widget.isHot) ? 8 : 0),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withAlpha(12),
            offset: Offset(0, 3),
            blurRadius: 14,
            spreadRadius: 0,
          )
        ],
        borderRadius: BorderRadius.circular(4),
      ),
      child: (widget.isHot == null || !widget.isHot)
          ? Row(
              children: [
                Visibility(
                  visible: widget.article != null &&
                      widget.article.coverImg != null &&
                      widget.article.coverImg != "",
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      MImage(
                        widget.article != null ? widget.article.coverImg : "",
                        fit: BoxFit.cover,
                        radius: BorderRadius.circular(2),
                        aspectRatio: 1,
                        errorSrc: "assets/image/default_1.png",
                        fadeSrc: "assets/image/default_1.png",
                      ),
                      Visibility(
                        visible: (widget.article != null &&
                            widget.article.coverImg != "" &&
                            widget.article.coverImg.endsWith(".mp4")),
                        child: Icon(
                          Icons.play_circle_outline,
                          size: 24,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(left: 8.w),
                    child: articleText(context),
                  ),
                ),
              ],
            )
          : Column(
              children: articleContent(context),
            ),
    );
  }

  Widget articleText(context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            (widget.isHot == null || !widget.isHot)
                ? Text(
                    widget.article != null ? widget.article.mainTitle : "",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 14.sp,
                      color: Colors.black,
                    ),
                  )
                : Row(
                    children: [
                      RoundButton(
                        text: "HOT",
                        textColor: Colors.white,
                        backgroup: Color(0xFFFF441A),
                        radius: 2,
                        fontSize: 10.sp,
                        fontWeight: MyFontWeight.medium,
                        padding: EdgeInsets.all(2),
                      ),
                      SizedBox(
                        width: 6.w,
                      ),
                      Expanded(
                        child: Text(
                          widget.article != null
                              ? widget.article.mainTitle
                              : "",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 14.sp,
                            color: Colors.black,
                          ),
                        ),
                        flex: 1,
                      ),
                    ],
                  ),
            SizedBox(
              height: 4.h,
            ),
            Text(
              widget.article != null ? (widget.article.viceTitle ?? "") : "",
              maxLines: AppUtils.textScale(context) > 1.05 ? 1 : 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w400,
                color: Color(0xFF353535),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    S.of(context).zuozhe((widget.article != null &&
                            widget.article.author != null)
                        ? widget.article.author.name
                        : ""),
                    style: TextStyle(
                      fontSize: 10.sp,
                      fontWeight: FontWeight.w400,
                      color: Color(0xFFB2B2B2),
                    ),
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/icon_likes.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.likes}"
                              : "",
                          style: TextStyle(
                            fontSize: 10.sp,
                            color: Color(0xFFB2B2B2),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/icon_views.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.viewers}"
                              : "",
                          style: TextStyle(
                            fontSize: 10.sp,
                            color: Color(0xFFB2B2B2),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              flex: 1,
            ),
            // if (widget.isHot != null && widget.isHot)
              IconText(
                widget.article != null
                    ? (widget.article.createTime.split(" ")[0])
                    : "",
                textStyle: TextStyle(
                  fontSize: 10.sp,
                  fontWeight: FontWeight.w400,
                  color: Color(0xFFB2B2B2),
                ),
                leftIcon: Icons.access_time_rounded,
                iconSize: 10,
                iconColor: Color(0xFFB2B2B2),
              ),
          ],
        ),
      ],
    );
  }

  List<Widget> articleContent(context) {
    return [
      Expanded(
        child: Visibility(
          visible: widget.article != null &&
              widget.article.coverImg != null &&
              widget.article.coverImg != "",
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                child: MImage(
                  widget.article != null ? widget.article.coverImg : "",
                  fit: BoxFit.cover,
                  radius: BorderRadius.vertical(top: Radius.circular(4)),
                  width: MediaQuery.of(context).size.width - 32.w,
                  height: 150.h,
                ),
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
              ),
              Positioned(
                child: Visibility(
                  visible: (widget.article != null &&
                      widget.article.coverImg != null &&
                      widget.article.coverImg != "" &&
                      widget.article.coverImg.endsWith(".mp4")),
                  child: Center(
                    child: Icon(
                      Icons.play_circle_outline,
                      size: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
              ),
            ],
          ),
        ),
        flex: 150,
      ),
      Expanded(
        flex: 97,
        child: Container(
          child: articleText(context),
          padding: EdgeInsets.all(8),
        ),
      ),
    ];
  }
}