import 'dart:async';
import 'dart:math';

import 'package:absensi_sas/app/constant.dart';
import 'package:absensi_sas/model/approval_detail_model.dart';
import 'package:absensi_sas/screen/approval/approval_mockup.dart';
import 'package:absensi_sas/screen/approval/widget/approval_dialog_confirmation.dart';
import 'package:absensi_sas/widget/custom_button_approval.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:latlong2/latlong.dart';

class ApprovalDetailScreen extends HookConsumerWidget {
  const ApprovalDetailScreen({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final loading = useState(true);
    final data = useState<ApprovalDetailModel>(
        ApprovalDetailModel(imagePath: "", lat: 0, long: 0));
    init() {
      loading.value = true;
      var randIdx = Random().nextInt(approvalDetailMockup.length);
      var tmp = approvalDetailMockup[randIdx];
      Timer(Duration(seconds: 2), () {
        data.value = tmp;
        loading.value = false;
      });
    }

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        init();
        return;
      });
      return () {};
    }, []);
    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(
              "Detail",
              style: Constant.title_screen(context: context),
            ),
          ),
          body: loading.value
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : Container(
                  color: Colors.white,
                  padding: EdgeInsets.symmetric(
                      horizontal:
                          Constant.getActualXPhone(context: context, x: 20)),
                  child: RefreshIndicator(
                    onRefresh: () async {
                      init();
                    },
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          SizedBox(
                            height: Constant.getActualYPhone(
                                context: context, y: 36),
                          ),
                          if (data.value.statusID == "1" ||
                              data.value.statusID == "2")
                            Row(
                              children: [
                                Spacer(),
                                if (data.value.statusID == "1")
                                  Container(
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                        color: Constant.bgGreen),
                                    padding: EdgeInsets.symmetric(
                                        horizontal: Constant.getActualXPhone(
                                            context: context, x: 8),
                                        vertical: Constant.getActualYPhone(
                                            context: context, y: 2)),
                                    child: Text(
                                      "Approve",
                                      style: Constant.body_12(context: context)
                                          .copyWith(
                                              color: Constant.primaryGreen),
                                    ),
                                  ),
                                if (data.value.statusID == "2")
                                  Container(
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                        color: Constant.bgRed),
                                    padding: EdgeInsets.symmetric(
                                        horizontal: Constant.getActualXPhone(
                                            context: context, x: 8),
                                        vertical: Constant.getActualYPhone(
                                            context: context, y: 2)),
                                    child: Text(
                                      "Reject",
                                      style: Constant.body_12(context: context)
                                          .copyWith(color: Constant.primaryRed),
                                    ),
                                  )
                              ],
                            ),
                          if (data.value.statusID == "1" ||
                              data.value.statusID == "2")
                            SizedBox(
                              height: Constant.getActualYPhone(
                                  context: context, y: 8),
                            ),
                          Container(
                            margin: EdgeInsets.only(bottom: 8),
                            child: Row(
                              children: [
                                Expanded(
                                  flex: 4,
                                  child: Text("Nama : ",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              color: Constant.textDarkGrey,
                                              fontWeight: FontWeight.w400)),
                                ),
                                Expanded(
                                  flex: 9,
                                  child: Text(data.value.name ?? "",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              fontWeight: FontWeight.w400)),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(bottom: 8),
                            child: Row(
                              children: [
                                Expanded(
                                  flex: 4,
                                  child: Text("NIP : ",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              color: Constant.textDarkGrey,
                                              fontWeight: FontWeight.w400)),
                                ),
                                Expanded(
                                  flex: 9,
                                  child: Text(data.value.nip ?? "",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              fontWeight: FontWeight.w400)),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(bottom: 8),
                            child: Row(
                              children: [
                                Expanded(
                                  flex: 4,
                                  child: Text("Tanggal : ",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              color: Constant.textDarkGrey,
                                              fontWeight: FontWeight.w400)),
                                ),
                                Expanded(
                                  flex: 9,
                                  child: Text(data.value.date ?? "",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              fontWeight: FontWeight.w400)),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(bottom: 8),
                            child: Row(
                              children: [
                                Expanded(
                                  flex: 4,
                                  child: Text("Jam : ",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              color: Constant.textDarkGrey,
                                              fontWeight: FontWeight.w400)),
                                ),
                                Expanded(
                                  flex: 9,
                                  child: Text(data.value.time ?? "",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              fontWeight: FontWeight.w400)),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(bottom: 8),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Expanded(
                                  flex: 4,
                                  child: Text("Alamat : ",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              color: Constant.textDarkGrey,
                                              fontWeight: FontWeight.w400)),
                                ),
                                Expanded(
                                  flex: 9,
                                  child: Text(data.value.address ?? "",
                                      style: Constant.body_16(context: context)
                                          .copyWith(
                                              fontWeight: FontWeight.w400)),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 16),
                            width: MediaQuery.of(context).size.width,
                            height: Constant.getActualYPhone(
                                context: context, y: 400),
                            child: FlutterMap(
                                options: MapOptions(
                                  center: LatLng(data.value.lat ?? 0,
                                      data.value.long ?? 0),
                                  zoom: 16,
                                ),
                                children: [
                                  TileLayer(
                                    urlTemplate:
                                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                                    userAgentPackageName: 'com.example.app',
                                  ),
                                  MarkerLayer(
                                    markers: [
                                      Marker(
                                        point: LatLng(-7.539538, 110.798357),
                                        child: const Icon(
                                          Icons.location_on,
                                          color: Colors.red,
                                          size: 50,
                                        ),
                                      )
                                      // Marker(
                                      //     point: LatLng(lat, long),
                                      //     width: 100,
                                      //     height: 100,
                                      //     builder: (context) => const Icon(
                                      //           Icons.location_on,
                                      //           color: Colors.red,
                                      //           size: 50,
                                      //         )),
                                    ],
                                  ),
                                ]),
                          ),
                          if (data.value.imagePath != "" &&
                              data.value.imagePath != null)
                            Container(
                              margin: EdgeInsets.only(top: 16, bottom: 48),
                              child: Image.network(
                                data.value.imagePath!,
                                errorBuilder: (context, error, stackTrace) {
                                  return Text(
                                    "Error load image : ${error.toString()}",
                                    style: Constant.body_12(context: context)
                                        .copyWith(color: Constant.primaryRed),
                                  );
                                },
                                loadingBuilder:
                                    (context, child, loadingProgress) {
                                  if (loadingProgress == null) return child;
                                  return Container(
                                      child: Column(
                                    children: [
                                      Text(loadingProgress.expectedTotalBytes !=
                                              null
                                          ? ((loadingProgress.cumulativeBytesLoaded /
                                                          loadingProgress
                                                              .expectedTotalBytes!) *
                                                      100)
                                                  .round()
                                                  .toString() +
                                              " %"
                                          : ""),
                                      LinearProgressIndicator(
                                        value: loadingProgress
                                                    .expectedTotalBytes !=
                                                null
                                            ? loadingProgress
                                                    .cumulativeBytesLoaded /
                                                loadingProgress
                                                    .expectedTotalBytes!
                                            : null,
                                      ),
                                    ],
                                  ));
                                },
                              ),
                            ),
                          if (data.value.statusID != "1" &&
                              data.value.statusID != "2")
                            Container(
                              margin: EdgeInsets.symmetric(vertical: 24),
                              child: Row(
                                children: [
                                  Expanded(
                                    child: CustomButtonWhite(
                                        btnText: "Reject",
                                        onPressed: () {
                                          ApprovalDialogConfirmation(
                                              context: context,
                                              typename: "presensi ",
                                              textInformation: "menolak ",
                                              staffName: data.value.name ?? "",
                                              confirmFunc: () {});
                                        }),
                                  ),
                                  SizedBox(
                                    width: Constant.getActualXPhone(
                                        context: context, x: 24),
                                  ),
                                  Expanded(
                                    child: CustomButtonOrange(
                                        btnText: "Approve",
                                        onPressed: () {
                                          ApprovalDialogConfirmation(
                                              context: context,
                                              typename: "presensi ",
                                              textInformation: "menyetujui ",
                                              staffName: data.value.name ?? "",
                                              confirmFunc: () {});
                                        }),
                                  ),
                                ],
                              ),
                            )
                        ],
                      ),
                    ),
                  ),
                ),
        ));
  }
}
