import 'dart:convert';

import 'package:clippy_flutter/ticket.dart';
import 'package:esc_pos_utils/esc_pos_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_pos_printer_platform_image_3/flutter_pos_printer_platform_image_3.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:ticket_booth/app/print_ticket.dart';
import 'package:ticket_booth/model/branch_model.dart';
import 'package:ticket_booth/model/cabapility_model.dart';
import 'package:ticket_booth/screen/widgets/error_dialog.dart';

import '../../app/constant.dart';
import '../../model/booth.dart';
import '../../model/printer_device.dart';

class FormInput extends HookConsumerWidget {
  FormInput(
      {Key? key,
      required this.selected_booth,
      required this.pm,
      required this.booth,
      required this.selected_printer,
      required this.prnt,
      required this.hostIpController,
      required this.hostQrController,
      required this.headerDisplayController,
      required this.footerDisplayController,
      required this.headerTicketController,
      required this.footerTicketController,
      required this.isLoading,
      required this.capabilityList,
      required this.selectedCapability,
      required this.getServiceBooth,
      required this.branch,
      required this.selected_branch})
      : super(key: key);

  final ValueNotifier<Booth> selected_booth;
  final ValueNotifier<List<Booth>> booth;
  final ValueNotifier<List<BranchModel>> branch;
  final ValueNotifier<BranchModel> selected_branch;
  final ValueNotifier<PrinterDev?> selected_printer;
  final ValueNotifier<List<PrinterDev>> prnt;
  final ValueNotifier<List<CapabilityProfileModel>> capabilityList;
  final ValueNotifier<CapabilityProfileModel?> selectedCapability;
  final TextEditingController hostIpController;
  final TextEditingController hostQrController;
  final TextEditingController headerDisplayController;
  final TextEditingController footerDisplayController;
  final TextEditingController headerTicketController;
  final TextEditingController footerTicketController;
  final PrinterManager pm;
  final Function getServiceBooth;
  final bool isLoading;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final hostIpError = useState(false);
    final hostQrError = useState(false);
    ;

    final usbStream =
        useStream<USBStatus>(pm.stateUSB, initialData: USBStatus.none);

    _connectDevice(PrinterDev selectedPrinter, PrinterType type,
        {bool reconnect = true, String? ipAddress = null}) async {
      try {
        await pm.connect(
            type: type,
            model: UsbPrinterInput(
                name: selectedPrinter.deviceName,
                productId: selectedPrinter.productId,
                vendorId: selectedPrinter.vendorId));
      } catch (e) {
        print(e);
      }
    }

    return Row(
      children: [
        SizedBox(
          width: Constant.getActualX(context: context, x: 625),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                child: Tooltip(
                  message: "Pilih salah satu cabang ",
                  child: Text(
                    'Cabang*',
                    style: Constant.label(context: context),
                  ),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 60),
                child: DropdownButtonFormField<BranchModel>(
                  style: Constant.normal(context: context)
                      .copyWith(color: Colors.black),
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(8),
                      ),
                    ),
                  ),
                  menuMaxHeight: Constant.getActualY(context: context, y: 500),
                  hint: Text(selected_branch.value.mBranchName ?? ''),
                  items: branch.value
                      .map((e) => DropdownMenuItem<BranchModel>(
                          value: e, child: Text(e.mBranchName ?? '')))
                      .toList(),
                  onChanged: (BranchModel? e) {
                    // print(e);
                    selected_branch.value = e!;
                  },
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 170),
                        child: Tooltip(
                          message:
                              "Pilih salah satu capability profile yang akan digunakan",
                          child: Text(
                            'Printer*',
                            style: Constant.label(context: context),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 170),
                        child: Tooltip(
                          message:
                              "Pilih salah satu printer yang akan digunakan",
                          child: Text(
                            'Capability Profile*',
                            style: Constant.label(context: context),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 100),
                      ),
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 100),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SizedBox(
                          width: Constant.getActualX(context: context, x: 170),
                          height: Constant.getActualY(context: context, y: 60),
                          child: DropdownButtonFormField<PrinterDev>(
                            value: selected_printer.value,
                            isExpanded: true,
                            style: Constant.normal(context: context)
                                .copyWith(color: Colors.black),
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(8),
                                ),
                              ),
                            ),
                            menuMaxHeight:
                                Constant.getActualY(context: context, y: 500),
                            hint: Text(
                              selected_printer.value?.deviceName
                                      .replaceAll(' ', '\u00A0') ??
                                  '',
                              // softWrap: true,
                              overflow: TextOverflow.ellipsis,
                            ),
                            items: prnt.value
                                .map((e) => DropdownMenuItem<PrinterDev>(
                                    value: e,
                                    child: Text(
                                      e.deviceName.replaceAll(' ', '\u00A0'),
                                      // softWrap: true,
                                      overflow: TextOverflow.ellipsis,
                                    )))
                                .toList(),
                            onChanged: (PrinterDev? e) {
                              selected_printer.value = e!;
                            },
                          )),
                      SizedBox(
                          width: Constant.getActualX(context: context, x: 170),
                          height: Constant.getActualY(context: context, y: 60),
                          child:
                              DropdownButtonFormField<CapabilityProfileModel>(
                            value: selectedCapability.value,
                            isExpanded: true,
                            style: Constant.normal(context: context)
                                .copyWith(color: Colors.black),
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(8),
                                ),
                              ),
                            ),
                            menuMaxHeight:
                                Constant.getActualY(context: context, y: 500),
                            hint: Text(
                              selectedCapability.value?.key
                                      ?.replaceAll(' ', '\u00A0') ??
                                  '',
                              // softWrap: true,
                              overflow: TextOverflow.ellipsis,
                            ),
                            items: capabilityList.value
                                .map((e) =>
                                    DropdownMenuItem<CapabilityProfileModel>(
                                        value: e,
                                        child: Text(
                                          e.key!.replaceAll(' ', '\u00A0'),
                                          // softWrap: true,
                                          overflow: TextOverflow.ellipsis,
                                        )))
                                .toList(),
                            onChanged: (CapabilityProfileModel? e) {
                              selectedCapability.value = e!;
                            },
                          )),
                      SizedBox(
                        // width: Constant.getActualX(context: context, x: 100),
                        height: Constant.getActualY(context: context, y: 60),
                        child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.red),
                            onPressed: () {
                              try {
                                if (selected_printer.value != null) {
                                  _connectDevice(
                                      selected_printer.value!, PrinterType.usb);
                                } else {
                                  throw Exception("Printer tidak dipilih");
                                }
                              } catch (e) {
                                ErrorDialog(context, e.toString(), 'ERROR');
                                print(e);
                              }
                            },
                            child: Tooltip(
                              message:
                                  "Tombol untuk menyambungkan printer yang elah dipilih",
                              child: Text(
                                "Connect",
                                style: Constant.label(context: context)
                                    .copyWith(color: Colors.white),
                              ),
                            )),
                      ),
                      SizedBox(
                        // width: Constant.getActualX(context: context, x: 100),
                        height: Constant.getActualY(context: context, y: 60),
                        child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.green),
                            onPressed: () {
                              try {
                                PrintTicket().printTest();
                              } catch (e) {
                                ErrorDialog(context, e.toString(), 'ERROR');

                                print(e);
                              }
                            },
                            child: Tooltip(
                              message:
                                  "Tombol untuk tes print, setelah terhubung akan mencetak teks tes print",
                              child: Text(
                                "Test Print",
                                style: Constant.label(context: context)
                                    .copyWith(color: Colors.white),
                              ),
                            )),
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              Tooltip(
                message:
                    "Domain yang akan digunakan untuk mendapatkan daftar layanan dan nomor antrian",
                child: Text(
                  'Host IP*',
                  style: Constant.label(context: context),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 60),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(
                      width: Constant.getActualX(context: context, x: 500),
                      child: TextField(
                        controller: hostIpController,
                        onChanged: (value) {
                          if (value.trim() == "") {
                            hostIpError.value = true;
                          }
                          if (value.trim() != "") {
                            hostIpError.value = false;
                          }
                        },
                        decoration: InputDecoration(
                            errorText:
                                hostIpError.value ? "Tidak boleh kosong" : null,
                            border: const OutlineInputBorder(),
                            focusedBorder: const OutlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.blue, width: 2)),
                            hintText: "http://devone.aplikasi.web.id",
                            hintStyle: Constant.label(context: context)),
                      ),
                    ),
                    SizedBox(
                      // width: Constant.getActualX(context: context, x: 200),
                      height: Constant.getActualY(context: context, y: 60),
                      child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.green),
                          onPressed: hostIpController.text == ""
                              ? null
                              : () {
                                  getServiceBooth();
                                },
                          child: Tooltip(
                            message:
                                "Tombol untuk menampilkan daftar layanan apabila tidak muncul",
                            child: isLoading
                                ? CircularProgressIndicator(
                                    color: Colors.white,
                                  )
                                : Text(
                                    "Layanan ",
                                    style: Constant.label(context: context)
                                        .copyWith(color: Colors.white),
                                  ),
                          )),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              Tooltip(
                message:
                    "Teks yang akan di cetak dibagian atas tiket. Maksimal 2 baris",
                child: Text(
                  'Header Ticket',
                  style: Constant.label(context: context),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 80),
                child: TextField(
                  controller: headerTicketController,
                  maxLines: 2,
                  decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      hintText: "Masukkan header ticket",
                      hintStyle: Constant.label(context: context)),
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          width: Constant.getActualX(context: context, x: 50),
        ),
        SizedBox(
            width: Constant.getActualX(context: context, x: 625),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Tooltip(
                message: "Teks yang akan di tampilkan di display bagian atas",
                child: Text(
                  'Header Display',
                  style: Constant.label(context: context),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 60),
                child: TextField(
                  controller: headerDisplayController,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: "Masukkan header display",
                      hintStyle: Constant.label(context: context)),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              Tooltip(
                message: "Teks yang akan di tampilkan di bagian bawah display",
                child: Text(
                  'Footer Display',
                  style: Constant.label(context: context),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 60),
                child: TextField(
                  controller: footerDisplayController,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: "Masukkan footer display",
                      hintStyle: Constant.label(context: context)),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              SizedBox(
                child: Tooltip(
                  message: "Pilih salah satu booth ",
                  child: Text(
                    'Booth*',
                    style: Constant.label(context: context),
                  ),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 60),
                child: DropdownButtonFormField<Booth>(
                  style: Constant.normal(context: context)
                      .copyWith(color: Colors.black),
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(8),
                      ),
                    ),
                  ),
                  menuMaxHeight: Constant.getActualY(context: context, y: 500),
                  hint: Text(selected_booth.value.name),
                  items: booth.value
                      .map((e) => DropdownMenuItem<Booth>(
                          value: e, child: Text(e.name)))
                      .toList(),
                  onChanged: (Booth? e) {
                    // print(e);
                    selected_booth.value = e!;
                  },
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 20),
              ),
              Tooltip(
                message:
                    "Teks yang akan di cetak di bagian bawah tiket. Maksimal 2 baris",
                child: Text(
                  'Footer Ticket',
                  style: Constant.label(context: context),
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 80),
                child: TextField(
                  maxLines: 2,
                  controller: footerTicketController,
                  decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      hintText: "Masukkan footer ticket",
                      hintStyle: Constant.label(context: context)),
                ),
              ),
            ]))
      ],
    );
  }
}