import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/task/task_item_view.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/resource/string.gen.dart';
import 'package:electronic_assistant/router/app_pages.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';
import 'controller.dart';

class TaskPage extends BasePage<TaskController> {
  const TaskPage({super.key});

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        buildBgBox(),
        buildTopGradient(),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AppBar(
              systemOverlayStyle: SystemUiOverlayStyle.dark,
              backgroundColor: Colors.transparent,
              leading: IconButton(
                icon: SizedBox(
                    width: 24.w,
                    height: 24.w,
                    child: Assets.images.iconBack.image()),
                // Custom icon
                onPressed: () {
                  Get.back();
                },
              ),
              title: Text(StringName.taskTitle.tr,
                  style: TextStyle(
                      fontSize: 17.sp,
                      fontWeight: FontWeight.bold,
                      color: ColorName.primaryTextColor)),
              centerTitle: true,
            ),
            Row(
              children: [
                Expanded(
                    child: Padding(
                  padding: EdgeInsets.only(left: 12.w),
                  child: CupertinoSearchTextField(
                    enabled: false,
                    onTap: () {
                      Get.toNamed(RoutePath.taskSearch);
                    },
                    placeholder: StringName.searchHint.tr,
                    prefixIcon: ImageIcon(Assets.images.iconSearch.provider(),
                        size: 20.w),
                    backgroundColor: Colors.white,
                    style: TextStyle(
                        fontSize: 14.w, color: ColorName.primaryTextColor),
                    placeholderStyle: TextStyle(
                        fontSize: 14.w, color: const Color(0xFFAFAFAF)),
                  ),
                )),
                GestureDetector(
                  onTap: () {},
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                          margin: EdgeInsets.symmetric(horizontal: 16.w),
                          width: 20.w,
                          height: 20.w,
                          child: Assets.images.iconSift.image()),
                      // Replace with your image asset
                      SizedBox(height: 2.h),
                      // Add some space between the image and text
                      Text(
                        '筛选',
                        style: TextStyle(
                            fontSize: 10.sp, color: ColorName.primaryTextColor),
                      ),
                    ],
                  ),
                )
              ],
            ),
            SizedBox(height: 12.h),
            Container(
              margin: EdgeInsets.only(left: 12.w),
              padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
              decoration: BoxDecoration(
                  color: const Color(0xFFE9E9E9),
                  borderRadius: BorderRadius.circular(8.w)),
              child: IntrinsicWidth(
                child: Row(
                  children: [
                    Text(controller.filterTxt,
                        style: TextStyle(
                            fontSize: 13.sp,
                            color: ColorName.secondaryTextColor)),
                    SizedBox(width: 6.w),
                    Opacity(
                        opacity: 0.7,
                        child: ImageIcon(
                            Assets.images.iconTaskFilterClose.provider(),
                            size: 16.w))
                  ],
                ),
              ),
            ),
            SizedBox(width: 7.h),
            Expanded(
                child: CustomScrollView(slivers: [
              SliverToBoxAdapter(
                child: taskGroupItem(StringName.taskItemTodo.tr, 3, false),
              ),
              SliverAnimatedList(
                  itemBuilder: _buildTodoItem, initialItemCount: 4),
              SliverToBoxAdapter(
                child: taskGroupItem(StringName.taskItemDone.tr, 16, false),
              ),
              SliverAnimatedList(
                  itemBuilder: _buildDoneItem, initialItemCount: 10),
            ]))
          ],
        )
      ],
    );
  }

  Widget _buildTodoItem(
      BuildContext context, int index, Animation<double> animation) {
    return Container();
  }

  Widget _buildDoneItem(
      BuildContext context, int index, Animation<double> animation) {
    return Container();
  }

  Container buildTopGradient() {
    return Container(
        width: 1.sw,
        height: 112.h,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: ['#E8EBFF'.toColor(), '#00E8EBFF'.toColor()],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: const [0.3, 1.0],
          ),
        ) // 其他子小部件
        );
  }

  DecoratedBox buildBgBox() {
    return DecoratedBox(
        decoration: BoxDecoration(color: '#F6F6F6'.toColor()),
        child: Container(
          height: double.infinity,
        ));
  }

  @override
  bool immersive() {
    return true;
  }

  Widget taskGroupItem(String groupName, int count, bool isExpanded) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 12.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(groupName,
              style: TextStyle(
                  fontSize: 14.sp, color: ColorName.secondaryTextColor)),
          //占位填充
          const Spacer(),
          Row(
            children: [
              Text('$count${StringName.taskItemDesc.tr}',
                  style: TextStyle(
                      fontSize: 12.sp, color: ColorName.secondaryTextColor)),
              SizedBox(width: 4.w),
              SizedBox(
                  width: 16.w,
                  height: 16.h,
                  child: Assets.images.iconTalkCollapse.image())
            ],
          )
        ],
      ),
    );
  }
}