import 'package:absensi_sas/app/constant.dart';
import 'package:absensi_sas/app/route.dart';
import 'package:absensi_sas/model/approval_model.dart';

import 'package:absensi_sas/provider/approval_filter_provider.dart';
import 'package:absensi_sas/screen/approval/approval_mockup.dart';
import 'package:absensi_sas/screen/approval/widget/approval_card_cuti.dart';
import 'package:absensi_sas/screen/approval/widget/approval_card_lembur.dart';
import 'package:absensi_sas/screen/approval/widget/approval_card_presensi.dart';
import 'package:absensi_sas/screen/approval/widget/approval_filter_chip_widget.dart';
import 'package:absensi_sas/screen/approval/widget/approval_filter_widget.dart';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class ApprovalScreen extends HookConsumerWidget {
  const ApprovalScreen({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final approvalFilterTempProvider = ref.watch(approvalFilterProvider);
    final approvalTypeList = approvalFilterTempProvider.approvalTypeList;
    final scrollCtr = useScrollController();

    final List<ApprovalModel> dataMockup = approvalCardList;

    onTap(String tipeID) {
      if (tipeID == "1") {
        print("Tipe Id 1");
        Navigator.pushNamed(context, approvalDetailRoute);
      }
    }

    return SafeArea(
      minimum: EdgeInsets.only(
          top: Constant.getActualYPhone(context: context, y: 30)),
      child: Scaffold(
        backgroundColor: Constant.textWhite,
        appBar: AppBar(
          backgroundColor: Colors.white,
          shadowColor: Colors.white,
          surfaceTintColor: Colors.white,
          scrolledUnderElevation: 0,
          elevation: 0,
          leading: Container(
            child: IconButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                icon: Icon(Icons.arrow_back_ios_new_rounded)),
          ),
          centerTitle: true,
          title: Text(
            "Approval",
            style: Constant.title_screen(context: context),
          ),
        ),
        body: Padding(
          padding: EdgeInsets.symmetric(
              horizontal: Constant.getActualXPhone(context: context, x: 20)),
          child: Column(
            children: [
              Container(
                color: Colors.white,
                child: Row(
                  children: [
                    ApprovalFilterWidget(),
                    Expanded(
                      child: LayoutBuilder(
                        builder: (context, constraints) {
                          return Container(
                            width: constraints.maxWidth,
                            child: SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Row(
                                children: [
                                  ...approvalTypeList.map(
                                      (e) => ApprovalFilterChipWidget(data: e))
                                ],
                              ),
                            ),
                          );
                        },
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(
                height: Constant.getActualYPhone(context: context, y: 27),
              ),
              Expanded(child: Container(
                // color: Colors.red,
                child: LayoutBuilder(builder: (context, Constraints) {
                  return Container(
                    height: Constraints.maxWidth,
                    child: RefreshIndicator(
                      onRefresh: () async {
                        print("Refresh");
                      },
                      child: ListView(
                        controller: scrollCtr,
                        children: [
                          Container(
                            margin: EdgeInsets.only(bottom: 28),
                            width: MediaQuery.of(context).size.width,
                            child: Row(
                              children: [
                                Container(
                                  child: Text(
                                    "Februari 2024",
                                    style: Constant.body_16(context: context)
                                        .copyWith(fontWeight: FontWeight.w600),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    margin: EdgeInsets.only(left: 10),
                                    child: Divider(
                                      height: 10,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          ...dataMockup.map((e) {
                            switch (e.typeID) {
                              case "1":
                                return ApprovalCardPresensi(
                                  data: e,
                                  onTap: onTap,
                                );
                              case "2":
                                return ApprovalCardCuti(
                                  data: e,
                                );
                              case "3":
                                return ApprovalCardLembur(
                                  data: e,
                                );
                              default:
                                return Container();
                            }
                          }).toList()
                        ],
                      ),
                    ),
                  );
                }),
              ))
            ],
          ),
        ),
      ),
    );
  }
}