import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:mitra_corporate/model/surat_jalan_detail_model.dart';
import 'package:mitra_corporate/provider/auth_provider.dart';
import 'package:mitra_corporate/screen/surat_jalan/get_surat_jalan_detail_provider.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

import '../../app/constant.dart';
import '../../provider/surat_jalan_provider.dart';
import '../../widgets/custom_snackbar_widget.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final id = ref.watch(suratJalanID);
    final auth = ref.watch(authProvider);
    final loading = useState(false);
    final data = useState<List<SuratJalanDetailModel>>(List.empty());
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        ref
            .read(GetSuratJalanDetailProvider.notifier)
            .getData(token: auth?.token ?? "", deliveryID: id);
      });
      return () {};
    }, [id]);
    ref.listen(
      GetSuratJalanDetailProvider,
      (pref, next) {
        if (next is GetSuratJalanDetailStateInit) {
          loading.value = true;
        } else if (next is GetSuratJalanDetailStateLoading) {
          loading.value = true;
        } else if (next is GetSuratJalanDetailStateError) {
          loading.value = false;
          SanckbarWidget(context, next.message, snackbarType.error);
          Constant.autoLogout(context: context, msg: next.message);
        } else if (next is GetSuratJalanDetailStateDone) {
          // print(jsonEncode(next.model));
          data.value = next.model;

          loading.value = false;
        }
      },
    );
    return Material(
      child: Column(
        children: [
          Container(
            height: Constant.getActualY(context: context, y: 64),
            decoration: BoxDecoration(
                color: Constant.grey_200,
                border: Border(bottom: BorderSide(color: Colors.grey))),
            child: Row(
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    alignment: Alignment.centerLeft,
                    // width: Constant.getActualX(context: context, x: 100),
                    height: Constant.getActualY(context: context, y: 64),
                    color: Constant.grey_200,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 12, bottom: 12, left: 20, right: 20),
                      child: Text('Tanggal',
                          style: Constant.body3_600(context: context)
                              .copyWith(color: Constant.textGrey)),
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    alignment: Alignment.centerLeft,
                    // width: Constant.getActualX(context: context, x: 115),
                    height: Constant.getActualY(context: context, y: 64),
                    color: Constant.grey_200,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 12, bottom: 12, left: 20, right: 20),
                      child: Text('No Lab',
                          style: Constant.body3_600(context: context)
                              .copyWith(color: Constant.textGrey)),
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    alignment: Alignment.centerLeft,
                    // width: Constant.getActualX(context: context, x: 196),
                    height: Constant.getActualY(context: context, y: 64),
                    color: Constant.grey_200,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 12, bottom: 12, left: 20, right: 20),
                      child: Text('Nama Pasien',
                          style: Constant.body3_600(context: context)
                              .copyWith(color: Constant.textGrey)),
                    ),
                  ),
                ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 100),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Dikirim',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 100),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Diterima',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 100),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Ditolak',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 100),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Proses',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 100),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Selesai',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
                // Expanded(
                //   flex: 1,
                //   child: Container(
                //     alignment: Alignment.centerLeft,
                //     // width: Constant.getActualX(context: context, x: 80),
                //     height: Constant.getActualY(context: context, y: 64),
                //     color: Constant.grey_200,
                //     child: Padding(
                //       padding: const EdgeInsets.only(
                //           top: 12, bottom: 12, left: 20, right: 20),
                //       child: Text('Aksi',
                //           overflow: TextOverflow.ellipsis,
                //           style: Constant.body3_600(context: context)
                //               .copyWith(color: Constant.textGrey)),
                //     ),
                //   ),
                // ),
              ],
            ),
          ),
          Container(
            height: Constant.getActualY(context: context, y: 580),
            color: Colors.white,
            child: loading.value
                ? Center(
                    child: LoadingAnimationWidget.discreteCircle(
                        color: Constant.primaryBlue, size: 40),
                  )
                : ListView(
                    children: data.value
                        .map(
                          (e) => Row(
                            children: [
                              Expanded(
                                flex: 2,
                                child: Container(
                                  alignment: Alignment.centerLeft,
                                  // width: Constant.getActualX(context: context, x: 100),
                                  height: Constant.getActualY(
                                      context: context, y: 64),

                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 12,
                                        bottom: 12,
                                        left: 20,
                                        right: 20),
                                    child: Text(e.date ?? "",
                                        style:
                                            Constant.body3_600(context: context)
                                                .copyWith(
                                                    color: Constant.textBlack)),
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 2,
                                child: Container(
                                  alignment: Alignment.centerLeft,
                                  width: Constant.getActualX(
                                      context: context, x: 115),
                                  height: Constant.getActualY(
                                      context: context, y: 64),
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 12,
                                        bottom: 12,
                                        left: 20,
                                        right: 20),
                                    child: Text(e.orderNumber ?? "",
                                        style:
                                            Constant.body3_600(context: context)
                                                .copyWith(
                                                    color: Constant.textBlack)),
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 2,
                                child: Container(
                                  alignment: Alignment.centerLeft,
                                  width: Constant.getActualX(
                                      context: context, x: 196),
                                  height: Constant.getActualY(
                                      context: context, y: 64),
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 12,
                                        bottom: 12,
                                        left: 20,
                                        right: 20),
                                    child: Text(e.patientName ?? "",
                                        style:
                                            Constant.body3_600(context: context)
                                                .copyWith(
                                                    color: Constant.textBlack)),
                                  ),
                                ),
                              ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 100),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //         padding: const EdgeInsets.only(
                              //             top: 12,
                              //             bottom: 12,
                              //             left: 20,
                              //             right: 20),
                              //         child: e.status == "S" ||
                              //                 e.status == "R" ||
                              //                 e.status == "T" ||
                              //                 e.status == "X" ||
                              //                 e.status == "P" ||
                              //                 e.status == "Q" ||
                              //                 e.status == "D"
                              //             ? Icon(
                              //                 EvaIcons.checkmarkCircle2,
                              //                 size: 24,
                              //                 color: Constant.green,
                              //               )
                              //             : null),
                              //   ),
                              // ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 100),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //         padding: const EdgeInsets.only(
                              //             top: 12,
                              //             bottom: 12,
                              //             left: 20,
                              //             right: 20),
                              //         child: e.status == "R" ||
                              //                 e.status == "T" ||
                              //                 e.status == "P" ||
                              //                 e.status == "Q" ||
                              //                 e.status == "D"
                              //             ? JustTheTooltip(
                              //                 preferredDirection:
                              //                     AxisDirection.up,
                              //                 backgroundColor:
                              //                     Constant.textGrey,
                              //                 elevation: 10,
                              //                 content: Padding(
                              //                   padding: EdgeInsets.all(10),
                              //                   child:
                              //                       Builder(builder: (context) {
                              //                     List<Map<String, String>>
                              //                         accepted = List.empty(
                              //                             growable: true);
                              //                     if (e.acceptedSample !=
                              //                         null) {
                              //                       var splt = e.acceptedSample
                              //                           ?.split('|');
                              //                       if (splt!.length > 0) {
                              //                         splt.forEach((element) {
                              //                           var splitted =
                              //                               element.split('@');
                              //                           accepted.add({
                              //                             "name": splitted[0],
                              //                             "type": splitted[1]
                              //                           });
                              //                         });
                              //                       }
                              //                     }
                              //                     return Wrap(
                              //                       spacing: 10,
                              //                       runSpacing: 10,
                              //                       children: accepted
                              //                           .map((e) => Chip(
                              //                               backgroundColor: e[
                              //                                           'type'] ==
                              //                                       "S"
                              //                                   ? Constant
                              //                                       .yellow_016
                              //                                   : Constant
                              //                                       .blue_016,
                              //                               label: Text(
                              //                                 e['name'] ?? "",
                              //                                 style: Constant
                              //                                         .caption2_600(
                              //                                             context:
                              //                                                 context)
                              //                                     .copyWith(
                              //                                         color: e['type'] ==
                              //                                                 "S"
                              //                                             ? Constant
                              //                                                 .textYellow
                              //                                             : Constant
                              //                                                 .textBlue),
                              //                               )))
                              //                           .toList(),
                              //                     );
                              //                   }),
                              //                 ),
                              //                 child: Icon(
                              //                   EvaIcons.checkmarkCircle2,
                              //                   size: 24,
                              //                   color: Constant.green,
                              //                 ),
                              //               )
                              //             : null),
                              //   ),
                              // ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 100),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //       padding: const EdgeInsets.only(
                              //           top: 12,
                              //           bottom: 12,
                              //           left: 20,
                              //           right: 20),
                              //       child: e.status == "T" || e.status == "X"
                              //           ? JustTheTooltip(
                              //               preferredDirection:
                              //                   AxisDirection.up,
                              //               backgroundColor: Constant.textGrey,
                              //               elevation: 10,
                              //               content: Padding(
                              //                 padding: EdgeInsets.all(10),
                              //                 child:
                              //                     Builder(builder: (context) {
                              //                   List<Map<String, String>>
                              //                       rejected =
                              //                       List.empty(growable: true);
                              //                   if (e.rejectedSample != null) {
                              //                     var splt = e.rejectedSample
                              //                         ?.split('|');
                              //                     if (splt!.length > 0) {
                              //                       splt.forEach((element) {
                              //                         var splitted =
                              //                             element.split('@');
                              //                         rejected.add({
                              //                           "name": splitted[0],
                              //                           "type": splitted[1]
                              //                         });
                              //                       });
                              //                     }
                              //                   }
                              //                   return Wrap(
                              //                     spacing: 10,
                              //                     runSpacing: 10,
                              //                     children: rejected
                              //                         .map((e) => Chip(
                              //                             backgroundColor: e[
                              //                                         'type'] ==
                              //                                     "S"
                              //                                 ? Constant
                              //                                     .yellow_016
                              //                                 : Constant
                              //                                     .blue_016,
                              //                             label: Text(
                              //                               e['name'] ?? "",
                              //                               style: Constant
                              //                                       .caption2_600(
                              //                                           context:
                              //                                               context)
                              //                                   .copyWith(
                              //                                       color: e[
                              //                                                   'type'] ==
                              //                                               "S"
                              //                                           ? Constant
                              //                                               .textYellow
                              //                                           : Constant
                              //                                               .textBlue),
                              //                             )))
                              //                         .toList(),
                              //                   );
                              //                 }),
                              //               ),
                              //               child: Icon(
                              //                 EvaIcons.checkmarkCircle2,
                              //                 size: 24,
                              //                 color: Constant.green,
                              //               ),
                              //             )
                              //           : null,
                              //     ),
                              //   ),
                              // ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 100),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //         padding: const EdgeInsets.only(
                              //             top: 12,
                              //             bottom: 12,
                              //             left: 20,
                              //             right: 20),
                              //         child: e.status == "Q" ||
                              //                 e.status == "P" ||
                              //                 e.status == "D"
                              //             ? Icon(
                              //                 EvaIcons.checkmarkCircle2,
                              //                 size: 24,
                              //                 color: Constant.green,
                              //               )
                              //             : null),
                              //   ),
                              // ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 100),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //         padding: const EdgeInsets.only(
                              //             top: 12,
                              //             bottom: 12,
                              //             left: 20,
                              //             right: 20),
                              //         child: e.status == "D"
                              //             ? Icon(
                              //                 EvaIcons.checkmarkCircle2,
                              //                 size: 24,
                              //                 color: Constant.green,
                              //               )
                              //             : null),
                              //   ),
                              // ),
                              // Expanded(
                              //   flex: 1,
                              //   child: Container(
                              //     alignment: Alignment.centerLeft,
                              //     width: Constant.getActualX(
                              //         context: context, x: 80),
                              //     height: Constant.getActualY(
                              //         context: context, y: 64),
                              //     child: Padding(
                              //         padding: const EdgeInsets.only(
                              //             top: 12,
                              //             bottom: 12,
                              //             left: 20,
                              //             right: 20),
                              //         child: InkWell(
                              //           onTap: e.status == "D"
                              //               ? () {
                              //                   showDialog(
                              //                       context: context,
                              //                       // barrierDismissible: false,
                              //                       builder: ((context) =>
                              //                           Container(
                              //                             child: DialogPrint(
                              //                                 url:
                              //                                     "http://devone.aplikasi.web.id/birt/run?__report=report/one/lab/rpt_fo_001.rptdesign&__format=pdf&username=ADMIN&PID=131868?t=1696927533769"),
                              //                           )));
                              //                 }
                              //               : null,
                              //           child: Tooltip(
                              //             message: "Cetak laporan",
                              //             child: Icon(
                              //               EvaIcons.printer,
                              //               size: 24,
                              //               color: e.status == "D"
                              //                   ? Constant.primaryBlue
                              //                   : Colors.grey,
                              //             ),
                              //           ),
                              //         )),
                              //   ),
                              // ),
                            ],
                          ),
                        )
                        .toList(),
                  ),
          ),
        ],
      ),
    );
  }
}
