import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:news_getx/data/model/channels.dart';
import 'package:news_getx/modules/main/main_controller.dart';
import 'package:news_getx/theme/app_colors.dart';
import 'package:news_getx/theme/app_shadows.dart';

class NewsChannelsWidget extends GetView<MainController> {
  Widget _buildChannelItem(ChannelResponse item) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      width: 70.w,
      height: 97.h,
      child: InkWell(
        // 没有水波纹 是有原因的 看splashColor文档 主体splashColor是透明纯黑色 所以不显示
        // splashColor: Colors.cyanAccent,
        onTap: () {
          print(item.title);
        },
        child: Column(
          children: [
            // 当 `child` 是图片这种有具体宽高的组件时,
            // 如果 `Container` 的宽高只设置期中一个,
            // 则另一个的值会根据 `child` 的宽高比例计算得出,
            // 如果是大于图片对应的宽高, 则图片原宽高居中显示,
            // 此时 `Container` 留有空白.
            // https://juejin.cn/post/7016649859008725022#heading-9
            Container(
              width: 64.w,
              height: 64.w,
              margin: EdgeInsets.symmetric(horizontal: 3.w),
              // 之所以设置padding而不是居中对齐
              // 是因为如果设置居中对齐的话展示的是图片本身的大小，而不是我们需要的内边距大小
              padding: EdgeInsets.all(10.w),
              decoration: BoxDecoration(
                color: AppColors.primaryBackground,
                boxShadow: [AppShadows.primaryShadow],
                borderRadius: BorderRadius.all(Radius.circular(32.w)),
              ),
              child: Image.asset(
                "assets/images/channel-${item.code}.png",
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 12.0),
              child: Text(
                item.title,
                textAlign: TextAlign.center,
                overflow: TextOverflow.clip,
                maxLines: 1,
                style: TextStyle(
                  color: AppColors.thirdElementText,
                  fontFamily: "Avenir",
                  fontWeight: FontWeight.w400,
                  fontSize: 14.sp,
                  height: 14.sp / 14,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => controller.state.channels == null
          ? Container()
          : Container(
              height: 137.h,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: controller.state.channels!.map<Widget>((item) {
                    return _buildChannelItem(item);
                  }).toList(),
                ),
              ),
            ),
    );
  }
}