import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/app/route.dart';
import '/screen/home_screen/pending_work_provider.dart';
import '/screen/home_screen/total_work_provider.dart';
import '/widget/information_rpt_card.dart';
import '/widget/pending_card.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

import '../../app/constant.dart';
import '../../models/pending_work_model.dart';
import '../../models/work_total_model.dart';
import '../../provider/current_user_provider.dart';
import '../../widget/information_card.dart';
import '../../widget/snackbar_widget.dart';
import '../../widget/work_card.dart';

class HomeScreen extends HookConsumerWidget {
  const HomeScreen({
    super.key,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final totalWork = useState<WorkTotalModel>(WorkTotalModel());
    final totalWorkLoading = useState(false);
    final pendingWork = useState<List<PendingWorkModel>>([]);
    final pendingWorkLoading = useState(false);
    final mUsername =
        ref.watch(currentUserProvider)?.model.user?.mStaffName ?? "0";

    final mCourirID =
        ref.watch(currentUserProvider)?.model.user?.mCourierID ?? "0";

    fetchData() {
      // ref.read(TotalWorkProvider.notifier).getData(
      //     id: ref.watch(currentUserProvider)?.model.user?.mCourierID ?? "0");
      ref.read(PendingWorkProvider.notifier).getData(
          id: ref.watch(currentUserProvider)?.model.user?.mCourierID ?? "0");
    }

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        fetchData();
      });
      return () {};
    }, [mCourirID]);
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        fetchData();
      });
      return () {};
    }, []);

    ref.listen(
      TotalWorkProvider,
      (previous, next) {
        if (next is TotalWorkStateLoading) {
          totalWorkLoading.value = true;
        } else if (next is TotalWorkStateError) {
          print(next.message);
          totalWorkLoading.value = false;
          SanckbarWidget(context, next.message, snackbarType.error);
        } else if (next is TotalWorkStateDone) {
          print(next.model);
          totalWork.value = next.model;
          totalWorkLoading.value = false;
        }
      },
    );
    ref.listen(
      PendingWorkProvider,
      (previous, next) {
        if (next is PendingWorkStateLoading) {
          pendingWorkLoading.value = true;
        } else if (next is PendingWorkStateError) {
          print(next.message);
          pendingWorkLoading.value = false;
          SanckbarWidget(context, next.message, snackbarType.error);
        } else if (next is PendingWorkStateDone) {
          // print(jsonEncode(next.model));
          // print(next.model.length);
          pendingWork.value = next.model;
          pendingWorkLoading.value = false;
        }
      },
    );
    return RefreshIndicator(
      onRefresh: () async {
        fetchData();
      },
      triggerMode: RefreshIndicatorTriggerMode.onEdge,
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Container(
          // color: Colors.red,
          padding: EdgeInsets.fromLTRB(
              Constant.getActualX(context: context, x: 40),
              Constant.getActualY(context: context, y: 68),
              Constant.getActualX(context: context, x: 40),
              0),
          child: Column(
            children: [
              SizedBox(
                height: Constant.getActualY(context: context, y: 48),
                child: Row(
                  children: [
                    Expanded(
                        flex: 10,
                        child: SizedBox(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "Hi $mUsername",
                                overflow: TextOverflow.ellipsis,
                                style: Constant.heading4(context: context)
                                    .copyWith(
                                        color: Constant.primaryBlue,
                                        fontWeight: FontWeight.w600),
                              ),
                              Text(
                                "Silahkan lakukan pengantaran",
                                overflow: TextOverflow.ellipsis,
                                style: Constant.caption1(context: context)
                                    .copyWith(fontWeight: FontWeight.w500),
                              )
                            ],
                          ),
                        )),
                    Expanded(
                        flex: 2,
                        child: Container(
                          alignment: Alignment.topRight,
                          // color: Colors.red,
                          child: Image.asset(
                            "assets/icon_home_bell_blue.png",
                            width: Constant.getActualY(context: context, y: 24),
                            height:
                                Constant.getActualY(context: context, y: 24),
                          ),
                        ))
                  ],
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              // InformationCard(
              //   data: totalWork.value,
              //   loading: totalWorkLoading.value,
              //   bgColor: Color(0XFFF3F7FB),
              //   elevation: false,
              // ),
              InformationRptCard(mCourirID),
              SizedBox(
                height: Constant.getActualY(context: context, y: 25),
              ),
              SizedBox(
                // color: Colors.blue,
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Ambil Pekerjaan Baru",
                          style: Constant.heading4(context: context).copyWith(
                              fontWeight: FontWeight.w400,
                              color: Constant.textPrimary),
                        ),
                        // InkWell(
                        //     onTap: () {},
                        //     child: Row(
                        //       children: [
                        //         Text(
                        //           "Detail",
                        //           style: Constant.caption1(context: context)
                        //               .copyWith(
                        //                   color: Constant.textPrimary,
                        //                   fontWeight: FontWeight.w500),
                        //         ),
                        //         SizedBox(
                        //           width: Constant.getActualX(
                        //               context: context, x: 5),
                        //         ),
                        //         const Icon(
                        //           Icons.arrow_forward_ios_outlined,
                        //           size: 15,
                        //         )
                        //       ],
                        //     ))
                      ],
                    ),
                    SizedBox(
                      height: Constant.getActualY(context: context, y: 20),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          // color: Colors.red,
                          height: Constant.getActualY(context: context, y: 80),
                          width: Constant.getActualX(context: context, x: 86),
                          decoration: BoxDecoration(
                              // color: Colors.red,
                              boxShadow: [
                                BoxShadow(
                                    color: Color(0XFF919EAB).withOpacity(0.12),
                                    offset: Offset(0.0, 12), //(x,y)
                                    blurRadius: 24,
                                    spreadRadius: -4),
                                BoxShadow(
                                  color: Color(0XFF919EAB).withOpacity(0.2),
                                  offset: Offset(0.0, 0), //(x,y)
                                  blurRadius: 2,
                                ),
                              ],
                              borderRadius: BorderRadius.circular(12)),
                          child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  elevation: 0.2,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  surfaceTintColor: Colors.grey,
                                  foregroundColor: Colors.grey,
                                  backgroundColor: Colors.white),
                              onPressed: () {
                                Navigator.of(context).pushNamed(inputPekerjaan,
                                    arguments: inputPekerjaanProp(0, 0));
                              },
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Image.asset(
                                      width: Constant.getActualX(
                                          context: context, x: 24),
                                      height: Constant.getActualX(
                                          context: context, x: 24),
                                      "assets/icon_home_hasil_blue.png"),
                                  Text(
                                    "Hasil",
                                    style: Constant.body3(context: context)
                                        .copyWith(
                                            fontWeight: FontWeight.w600,
                                            color: Constant.textSecondary),
                                  )
                                ],
                              )),
                        ),
                        Container(
                          // color: Colors.red,
                          height: Constant.getActualY(context: context, y: 80),
                          width: Constant.getActualX(context: context, x: 86),
                          decoration: BoxDecoration(
                              // color: Colors.red,
                              boxShadow: [
                                BoxShadow(
                                    color: Color(0XFF919EAB).withOpacity(0.12),
                                    offset: Offset(0.0, 12), //(x,y)
                                    blurRadius: 24,
                                    spreadRadius: -4),
                                BoxShadow(
                                  color: Color(0XFF919EAB).withOpacity(0.2),
                                  offset: Offset(0.0, 0), //(x,y)
                                  blurRadius: 2,
                                ),
                              ],
                              borderRadius: BorderRadius.circular(12)),
                          child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  elevation: 0.2,
                                  shape: RoundedRectangleBorder(
                                    side: const BorderSide(
                                        width: 0.1, color: Colors.grey),
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  surfaceTintColor: Colors.grey,
                                  foregroundColor: Colors.grey,
                                  backgroundColor: Colors.white),
                              onPressed: () {
                                Navigator.of(context).pushNamed(inputPekerjaan,
                                    arguments: inputPekerjaanProp(1, 0));
                              },
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Image.asset(
                                      width: Constant.getActualX(
                                          context: context, x: 24),
                                      height: Constant.getActualX(
                                          context: context, x: 24),
                                      "assets/icon_home_sample_blue.png"),
                                  Text(
                                    "Sample",
                                    style: Constant.body3(context: context)
                                        .copyWith(
                                            fontWeight: FontWeight.w600,
                                            color: Constant.textSecondary),
                                  )
                                ],
                              )),
                        ),
                        Container(
                          // color: Colors.red,
                          height: Constant.getActualY(context: context, y: 80),
                          width: Constant.getActualX(context: context, x: 86),
                          decoration: BoxDecoration(
                              // color: Colors.red,
                              boxShadow: [
                                BoxShadow(
                                    color: Color(0XFF919EAB).withOpacity(0.12),
                                    offset: Offset(0.0, 12), //(x,y)
                                    blurRadius: 24,
                                    spreadRadius: -4),
                                BoxShadow(
                                  color: Color(0XFF919EAB).withOpacity(0.2),
                                  offset: Offset(0.0, 0), //(x,y)
                                  blurRadius: 2,
                                ),
                              ],
                              borderRadius: BorderRadius.circular(12)),
                          child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  elevation: 0.2,
                                  shape: RoundedRectangleBorder(
                                    side: const BorderSide(
                                        width: 0.1, color: Colors.grey),
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  surfaceTintColor: Colors.grey,
                                  foregroundColor: Colors.grey,
                                  backgroundColor: Colors.white),
                              onPressed: () {
                                Navigator.of(context).pushNamed(inputPekerjaan,
                                    arguments: inputPekerjaanProp(2, 0));
                              },
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Image.asset(
                                      width: Constant.getActualX(
                                          context: context, x: 24),
                                      height: Constant.getActualX(
                                          context: context, x: 24),
                                      "assets/icon_home_lainnya_blue.png"),
                                  Text(
                                    "Lainya",
                                    style: Constant.body3(context: context)
                                        .copyWith(
                                            fontWeight: FontWeight.w600,
                                            color: Constant.textSecondary),
                                  )
                                ],
                              )),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 30),
              ),
              SizedBox(
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Pending List Pekerjaan",
                          overflow: TextOverflow.ellipsis,
                          style: Constant.heading4(context: context).copyWith(
                              fontWeight: FontWeight.w400,
                              color: Constant.textPrimary),
                        ),
                        // InkWell(
                        //     onTap: () {},
                        //     child: Row(
                        //       children: [
                        //         Text(
                        //           "Detail",
                        //           style: Constant.caption1(context: context)
                        //               .copyWith(
                        //                   color: Constant.textPrimary,
                        //                   fontWeight: FontWeight.w500),
                        //         ),
                        //         SizedBox(
                        //           width: Constant.getActualX(
                        //               context: context, x: 5),
                        //         ),
                        //         const Icon(
                        //           Icons.arrow_forward_ios_outlined,
                        //           size: 15,
                        //         )
                        //       ],
                        //     ))
                      ],
                    ),
                    SizedBox(
                      height: Constant.getActualY(context: context, y: 20),
                    ),
                    Container(
                      // color: Colors.red,
                      padding:
                          EdgeInsets.symmetric(horizontal: 0.9, vertical: 0.5),
                      height: Constant.getActualY(context: context, y: 235),
                      child: pendingWorkLoading.value
                          ? LoadingAnimationWidget.fourRotatingDots(
                              color: Constant.primaryBlue, size: 50)
                          : ListView.builder(
                              itemCount: pendingWork.value.length,
                              itemBuilder: (context, index) {
                                return PendingCardWidget(
                                    data: pendingWork.value[index]);
                              },
                            ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
