import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:making_school_asignment_app/common/job/annotated_class.dart';
import 'package:making_school_asignment_app/common/utils/enum_untils.dart';
import 'package:making_school_asignment_app/common/utils/utils.dart';
import 'package:making_school_asignment_app/page/global_widget/MyEmptyWidget.dart';
import 'package:making_school_asignment_app/page/global_widget/ReturnToHomepage.dart';
import 'package:making_school_asignment_app/routes/app_pages.dart';

import 'answer_trajectory_detail_logic.dart';

class AnswerTrajectoryDetailPage extends StatefulWidget {
  const AnswerTrajectoryDetailPage({Key? key}) : super(key: key);

  @override
  State<AnswerTrajectoryDetailPage> createState() =>
      _AnswerTrajectoryDetailPageState();
}

class _AnswerTrajectoryDetailPageState
    extends State<AnswerTrajectoryDetailPage> {
  final logic = Get.find<AnswerTrajectoryDetailLogic>();
  final state = Get
      .find<AnswerTrajectoryDetailLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
        builder: (BuildContext context, Orientation orientation){
          return Scaffold(
            backgroundColor: Color(0xFFF5F5F5),
            appBar: AppBar(
              centerTitle: true,
              backgroundColor: Colors.white,
              title: Obx(() {
                return Text(
                  state.title.value,
                  style: TextStyle(fontSize: 14.sp, color: Color(0xFF333333)),
                  overflow: TextOverflow.ellipsis,
                );
              }),
              leading: IconButton(
                icon: Icon(Icons.arrow_back_ios, color: Colors.black),
                onPressed: () => Get.back(),
              ),
              actions: const [
                ReturnToHomepage(),
              ],
            ),
            body: Column(
              children: [
                SizedBox(
                  height: 10.r,
                ),
                Obx(() {
                  return state.classList.isNotEmpty?Padding(
                    padding: EdgeInsets.symmetric(horizontal: 14.r),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                              children: List.generate(state.classList.length, (
                                  index) {
                                AnnotatedClass item = state.classList[index];
                                return InkWell(
                                  onTap: () {
                                    if (state.currentClass.value.classId !=
                                        item.classId) {
                                      state.currentClass.value = item;
                                    }
                                  },
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        vertical: 5.r, horizontal: 10.r),
                                    margin: EdgeInsets.only(
                                        right: index < state.classList.length
                                            ? 8.r
                                            : 0),
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(4.r),
                                    ),
                                    child: Center(
                                      child: Text(
                                        '${EnumUtils.formatGrade(state.grade)}${item
                                            .className}',
                                        style: TextStyle(
                                            fontSize: 10.sp,
                                            color: state.currentClass.value
                                                .classId == item.classId
                                                ? Theme.of(context).primaryColor
                                                : Color(0xFF686868)),
                                      ),
                                    ),
                                  ),
                                );
                              })),
                        ),
                      ],
                    ),
                  ):Container();
                }),
                SizedBox(
                  height: 10.r,
                ),
                Container(
                  height: 1.r,
                  color: const Color(0xFFCCCCCC),
                ),
                Obx((){
                  return state.currentClass.value.students.isNotEmpty ? Expanded(
                    child: Padding(
                      padding: EdgeInsets.symmetric(vertical: 14.r, horizontal: 14.r),
                      child: EasyRefresh(
                        firstRefresh: true,
                        taskIndependence: true,
                        controller: logic.refreshController,
                        header: MaterialHeader(),
                        footer: TaurusFooter(),
                        onRefresh: () async {
                          // getStudentList();
                        },
                        child: state.currentClass.value.students.isNotEmpty
                            ? Utils.isPad()
                            ? GridView(
                          gridDelegate:
                          SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            mainAxisSpacing: 10.r,
                            crossAxisSpacing: 10.r,
                            childAspectRatio: 556 / 112,
                          ),
                          children: List.generate(
                              state.currentClass.value.students.length, (index) {
                            AnnotatedStudents item = state.currentClass.value.students[index];
                            return InkWell(
                              onTap: () {
                                Get.toNamed(Routes.studentPersonalPage, arguments: {'studentId': item.studentId, 'homeworkId': state.homeworkId.value,'subject':state.subject});
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(horizontal: 10.r),
                                decoration: BoxDecoration(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(10.r)),
                                  color: Colors.white,
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                        child: Text(
                                          item.studentName,
                                          style: TextStyle(
                                              fontSize: 12.sp,
                                              color: Color(0xFF5E5E5E)),
                                        )),

                                    Container(
                                        height: 20.r,
                                        width: 70.r,
                                        decoration: BoxDecoration(
                                          border: Border.all(
                                              width: 1.r, color: Color(0xFFB2DA93)),
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(20.r)),

                                        ),
                                        child: Center(child: Text('详情',
                                            style: TextStyle(fontSize: 10.r,
                                                color: Color(0xFFB2DA93))),
                                        )),
                                  ],
                                ),
                              ),
                            );
                          }),
                        )
                            : ListView.builder(
                          itemBuilder: (context, index) {
                            AnnotatedStudents item = state.currentClass.value
                                .students[index];
                            return InkWell(
                              onTap: () {
                                Get.toNamed(Routes.studentPersonalPage, arguments: {'studentId': item.studentId, 'homeworkId': state.homeworkId.value,'subject':state.subject});
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                    vertical: 20.r, horizontal: 15.r),
                                margin: EdgeInsets.only(bottom: 15.r),
                                decoration: BoxDecoration(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(10.r)),
                                  color: Colors.white,
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                        child: Text(
                                          item.studentName,
                                          style: TextStyle(
                                              fontSize: 12.sp,
                                              color: Color(0xFF5E5E5E)),
                                        )),
                                    Container(
                                        height: 24.r,
                                        width: 72.r,
                                        decoration: BoxDecoration(
                                          border: Border.all(
                                              width: 1.r, color: Color(0xFFB2DA93)),
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(20.r)),

                                        ),
                                        child: Center(child: Text('详情',
                                            style: TextStyle(fontSize: 10.r,
                                                color: Color(0xFFB2DA93))),
                                        )),
                                  ],
                                ),
                              ),
                            );
                          },
                          itemCount: state.currentClass.value.students.length,
                        )
                            : const MyEmptyWidget(),
                      ),
                    ),
                  ) : const MyEmptyWidget();
                }),
              ],
            ),
          );
        }
    );
  }

  @override
  void dispose() {
    Get.delete<AnswerTrajectoryDetailLogic>();
    super.dispose();
  }
}