import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ArticleList extends StatefulWidget {
  final List<Article> articles;

  ArticleList(
    this.articles,
  );

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

class _ArticleList extends State<ArticleList> {
  ApiService apiService;

  @override
  void initState() {
    super.initState();

    SharedPreferences.getInstance().then((value) => {
          apiService = ApiService(Dio(),
              context: context, token: value.getString("token")),
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 20.h, left: 16.w, right: 16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Padding(
                padding: EdgeInsets.only(bottom: 12.h),
                child: Text(
                 S.of(context).zuixinwenzhang,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 15.sp,
                    fontWeight: MyFontWeight.semi_bold,
                    color: Colors.black,
                  ),
                )),
            ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: widget.articles.length,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, position) {
                return GestureDetector(
                  onTap: () {
                    Navigator.of(context).pushNamed('/router/web_page',
                        arguments: {"articleId": widget.articles[position].id});
                    widget.articles[position].viewers =
                        (widget.articles[position].viewers + 1);
                    setState(() {});
                  },
                  child: articleItem(widget.articles[position], position),
                );
              },
            ),
          ],
        ));
  }

  Widget articleItem(Article articles, position) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.only(bottom: 16.h),
      color: Colors.white,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
              child: Container(
            height: MediaQuery.of(context).size.width >= 650 ? 133.h  :100.h,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  widget?.articles[position]?.mainTitle ?? "",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 14.sp,
                    height: 1.4.h,
                    fontWeight: MyFontWeight.semi_bold,
                    color: Colors.black,
                  ),
                ),
                SizedBox(height:8.h),
                Expanded(child: Text(
                  widget?.articles[position]?.viceTitle ?? "",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 12.sp,
                    height: 1.2.h,
                    fontWeight: MyFontWeight.regular,
                    color: Color(0xFF353535),
                  ),
                )),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // Expanded(
                    //   child: Text(
                    //     widget.articles != null
                    //         ? widget.articles[position]?.author?.name ?? ""
                    //         : "",
                    //     overflow: TextOverflow.ellipsis,
                    //     maxLines: 1,
                    //     style: TextStyle(
                    //       fontSize: 12.sp,
                    //       fontWeight: MyFontWeight.medium,
                    //       color: Color(0xFF8E8E8E),
                    //     ),
                    //   ),
                    // ),
                    // SizedBox(width: 8.w),
                    Image.asset(
                      "assets/image/browse.webp",
                      width: 14,
                      height: 14,
                      color: Color(0xFF808080),
                    ),
                    SizedBox(width: 6.w,),
                    Expanded(
                        child: Text(
                          "${widget?.articles[position]?.viewers}" ?? "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: MyFontWeight.regular,
                            color: Color(0xFF8D8D8D),
                          ),
                        )),
                    Expanded(child:Text(
                      widget?.articles[position]?.createTime?.split(" ")[0] ??
                          "",
                      style: TextStyle(
                        fontSize: 12.sp,
                        fontWeight: MyFontWeight.regular,
                        color: Color(0xFF8D8D8D),
                      ),
                    )),

                  ],
                )
              ],
            ),
          )),
          SizedBox(width: 12),
          MImage(
            widget?.articles[position]?.coverImg ?? "",
            fit: BoxFit.cover,
            radius: BorderRadius.all(Radius.circular(2)),
            width: 100,
            height: 100,
          ),
        ],
      ),
    );
  }
}