import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/data/article.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/utils/shared_preference.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();

    apiService = ApiService(Dio(),
      context: context,
      token: SharedInstance.instance.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},
                    );
                    int viewer = widget.articles[position].viewers ?? 0;
                    widget.articles[position].viewers = (viewer + 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: [
                      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,
          ),
        ],
      ),
    );
  }
}