import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../../model/sex_model.dart';
import '../../screen/scan/sex_provider.dart';
import '../../provider/scan_provider.dart';
import '../../widget/customsnackbarwidget.dart';

import '../../app/app_extension.dart';
import '../../app/constant.dart';
import '../../app/route.dart';
import '../../provider/current_user_provider.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
      SystemUiOverlay.bottom,
    ]);

    final currentUser = ref.watch(currentUserProvider);
    final host = currentUser?.host ?? "";
    final userId = currentUser?.model.userId ?? "";
    final baseUrl = "https://$host/";

    final selectedPersonId = ref.watch(selectedPersonIdx);
    final isLoading = useState<bool>(false);

    final listDataEdit = ref.watch(selectedEdit);

    final listSex = useState<List<SexModel>>(
      List.empty(growable: true),
    );

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        final userID = currentUser?.model.userId ?? "0";
        if (userID == "0") {
          // not logged in
          Navigator.of(context)
              .pushNamedAndRemoveUntil(loginRoute, (route) => false);
          return;
        }
      });
      return () {};
    }, [currentUser]);

    // sex
    ref.listen(sexProvider, (prev, next) {
      if (next is SexStateLoading) {
        isLoading.value = true;
      } else if (next is SexStateError) {
        isLoading.value = false;
        // errorMessage.value = next.message;
        snackbarWidget(
          context,
          next.message,
          snackbarType.error,
          Duration(seconds: 3),
        );
      } else if (next is SexStateDone) {
        isLoading.value = false;
        listSex.value = next.model;
        ref.read(eSexCtr.notifier).state =
            TextEditingController(text: next.model[0].m_sexname);
      }
    });

    // isLoading
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timestamp) async {
        if (isLoading.value == true) {
          snackbarWidget(
            context,
            "Sedang Memuat Data",
            snackbarType.warning,
            Duration(days: 1),
          );
        }
      });
      return () {};
    }, [isLoading]);

    // check person id
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timestamp) async {
        final personIDx = selectedPersonId;
        if (personIDx == "0") {
          snackbarWidget(
            context,
            'Gagal mendapatkan data',
            snackbarType.error,
            Duration(seconds: 3),
          );
          Navigator.of(context)
              .pushNamedAndRemoveUntil(homeRoute, (route) => false);
          return;
        } else {
          // listDataEdit
          // set ke inputan
          ref.read(eNikCtr.notifier).state =
              TextEditingController(text: listDataEdit.personNIK);

          ref.read(eNamaCtr.notifier).state =
              TextEditingController(text: listDataEdit.personName);

          ref.read(eDobCtr.notifier).state = TextEditingController(
              text: formatDateJiffy(listDataEdit.personDob));

          ref.read(eDobDt.notifier).state =
              DateTime.parse(listDataEdit.personDob);
          // sex
          ref.read(sexProvider.notifier).sex(
                host: host,
              );
        }
      });
      return () {};
    }, [selectedPersonId]);

    // date picker
    Future<void> _selectDate(BuildContext context, WidgetRef ref) async {
      DateTime? newSelectedDate = await showDatePicker(
        context: context,
        initialDate: (listDataEdit.personDob == "0000-00-00")
            ? DateTime.parse(listDataEdit.personDob)
            : DateTime.now(),
        firstDate: DateTime(2000),
        lastDate: DateTime(2100),
      );

      if (newSelectedDate != null) {
        ref.read(eDobDt.notifier).state = newSelectedDate;
        ref.read(eDobCtr.notifier).state.text =
            formatDateJiffy(newSelectedDate.toLocal().toString());
      }
    }

    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus!.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Constant.bgGrey,
        body: ListView(
          // crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // atas
            Image.asset(
              'images/vektoratas.png',
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 34,
              ),
            ),
            // image ktp
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: Image.network(
                baseUrl + listDataEdit.personUrl,
                fit: BoxFit.fitWidth,
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 32,
              ),
            ),
            // inputan nik
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: Text(
                'NIK',
                style: Constant.title_400(context: context).copyWith(
                  color: Constant.inputanGrey,
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: TextField(
                controller: ref.read(eNikCtr),
                decoration: InputDecoration(
                  // hintText: "NIK",
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 1,
                    ),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.blue,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            // inputan nama
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: Text(
                'Nama',
                style: Constant.title_400(context: context).copyWith(
                  color: Constant.inputanGrey,
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: TextField(
                controller: ref.read(eNamaCtr),
                decoration: InputDecoration(
                  // hintText: "NIK",
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 1,
                    ),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.blue,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            // inputan dob
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: Text(
                'DOB',
                style: Constant.title_400(context: context).copyWith(
                  color: Constant.inputanGrey,
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: TextField(
                readOnly: true,
                controller: ref.read(eDobCtr),
                onTap: () {
                  _selectDate(context, ref);
                },
                decoration: InputDecoration(
                  // hintText: "NIK",
                  suffixIcon: IconButton(
                    icon: Icon(Icons.calendar_today,
                        color: Constant.textCardGrey),
                    onPressed: () {
                      _selectDate(context, ref);
                    },
                  ),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 1,
                    ),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.blue,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            // inputan jenis kelamin
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: Text(
                'Jenis Kelamin',
                style: Constant.title_400(context: context).copyWith(
                  color: Constant.inputanGrey,
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 16,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualYPhone(context: context, y: 12),
                right: Constant.getActualYPhone(context: context, y: 12),
              ),
              child: DropdownMenu<SexModel>(
                initialSelection:
                    (listSex.value.isNotEmpty) ? listSex.value[0] : null,
                controller: ref.read(eSexCtr),
                width: Constant.getActualXPhone(
                    context: context, x: double.infinity),
                // hintText: "Jenis Kelamin",
                requestFocusOnTap: true,
                enableFilter: true,
                // label: const Text('Jenis Kelamin'),
                onSelected: (SexModel? sex) {
                  if (sex != null) {
                    ref.read(eSexSelected.notifier).state = sex;
                    FocusScope.of(context).unfocus();
                  }
                },
                dropdownMenuEntries: listSex.value
                    .map<DropdownMenuEntry<SexModel>>((SexModel sex) {
                  return DropdownMenuEntry<SexModel>(
                    value: sex,
                    label: sex.m_sexname,
                  );
                }).toList(),
                inputDecorationTheme: InputDecorationTheme(
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 1,
                    ),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.blue,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 44,
              ),
            ),
            // button save
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(
                  context: context,
                  x: 16,
                ),
                right: Constant.getActualXPhone(
                  context: context,
                  x: 16,
                ),
              ),
              child: SizedBox(
                width: double.infinity,
                height: Constant.getActualYPhone(
                  context: context,
                  y: 48,
                ),
                child: ElevatedButton(
                  onPressed: () {
                    var param = {
                      "Person_ID":selectedPersonId,
                      "Person_Name":ref.read(eNamaCtr).text,
                      "Person_Dob":ref.read(eDobCtr).text,
                      "Person_Sex":ref.read(eSexSelected).M_SexID,
                    };

                    print(param);

                    // Navigator.of(context).pushNamedAndRemoveUntil(
                    //   homeRoute,
                    //   (route) => false,
                    // );
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Constant.bgButton,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    elevation: 8,
                    shadowColor: Constant.bgButton.withOpacity(0.24),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'SAVE',
                        style:
                            Constant.titleButton500(context: context).copyWith(
                          color: Constant.textWhite,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}