import React, { useState } from "react";

function Scaner() {
  //   const [port, setPort] = useState(null);
  //   const [isConnected, setIsConnected] = useState(false);
  //   const [isScanning, setIsScanning] = useState(false);
  //   const [scanResult, setScanResult] = useState("");
  //   const [errorMessage, setErrorMessage] = useState("");
  //   // Función para seleccionar y conectar el puerto serial
  //   const selectAndConnectPort = async () => {
  //     try {
  //       // Solicitar al usuario seleccionar un puerto serial
  //       const usbVendorId = "6790";
  //       const selectedPort = await navigator.serial.requestPort();
  //       console.log(selectedPort);
  //       if (selectedPort) {
  //         await selectedPort.open({ baudRate: 9600 }); // Abre el puerto con la tasa de baudios adecuada
  //         // Guardamos el puerto conectado en el estado
  //         setPort(selectedPort);
  //         setIsConnected(true);
  //         setErrorMessage("");
  //       }
  //     } catch (error) {
  //       console.error("Error al conectar el puerto:", error);
  //       setErrorMessage("No se pudo conectar al puerto.");
  //     }
  //   };
  //   // Función para iniciar el escaneo
  //   const connectAndScan = async () => {
  //     if (!port) return;
  //     setIsScanning(true);
  //     try {
  //       const textEncoder = new TextEncoderStream();
  //       const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
  //       const writer = textEncoder.writable.getWriter();
  //       // Comando para iniciar el escaneo (ajusta según tu dispositivo)
  //       await writer.write("SCAN_COMMAND");
  //       writer.releaseLock();
  //       // Leer el resultado del escaneo
  //       const textDecoder = new TextDecoderStream();
  //       const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
  //       const reader = textDecoder.readable.getReader();
  //       let scanData = "";
  //       while (true) {
  //         const { value, done } = await reader.read();
  //         if (done) {
  //           break;
  //         }
  //         scanData += value;
  //       }
  //       setScanResult(scanData);
  //       reader.releaseLock();
  //     } catch (error) {
  //       console.error("Error al escanear:", error);
  //       setScanResult("Error al escanear");
  //     } finally {
  //       setIsScanning(false);
  //     }
  //   };
  //   return (
  //     <div>
  //       <h1>Interfaz de Escáner</h1>
  //       {!isConnected ? (
  //         <button onClick={selectAndConnectPort}>
  //           Seleccionar y Conectar Puerto Serial
  //         </button>
  //       ) : (
  //         <button onClick={connectAndScan} disabled={isScanning}>
  //           {isScanning ? "Escaneando..." : "Iniciar Escaneo"}
  //         </button>
  //       )}
  //       {isConnected && <p>Puerto conectado</p>}
  //       {scanResult && <div>Resultado del Escaneo: {scanResult}</div>}
  //       {errorMessage && <p style={{ color: "red" }}>{errorMessage}</p>}
  //     </div>
  //   );
  const [device, setDevice] = useState<USBDevice | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [isScanning, setIsScanning] = useState(false);
  const [scanResult, setScanResult] = useState(null);
  const [errorMessage, setErrorMessage] = useState("");
  // Función para seleccionar y conectar el hardware
  const selectAndConnectDevice = async () => {
    try {
      // Solicita al usuario seleccionar un dispositivo USB
      // const selectedDevice = await navigator.usb.requestDevice({
      //   filters: [{ vendorId: 6790 }],
      // });
      // const selectedDevice = await navigator.usb.requestDevice({
      //   filters: [{ vendorId: 1423 }],
      // });
      const selectedDevice = await navigator.usb.requestDevice({
        filters: [],
      });
      if (selectedDevice) {
        await selectedDevice.open();

        setDevice(selectedDevice);
        setIsConnected(true);
        setErrorMessage("");
      }
    } catch (error) {
      console.error("Error al conectar el dispositivo:", error);
      setErrorMessage("No se pudo conectar al dispositivo.");
    }
  };
  // Función para iniciar el escaneo
  const connectAndScan = async () => {
    if (!device) return;
    setIsScanning(true);
    try {
      // Comando para iniciar el escaneo

      await device.selectConfiguration(1);
      await device.claimInterface(0);

      const result = await device.transferIn(1, 64);
      //@ts-ignore
      setScanResult(result.data);
    } catch (error) {
      console.error("Error al escanear:", error);
      //@ts-ignore
      setScanResult("Error al escanear");
    } finally {
      setIsScanning(false);
    }
  };
  return (
    <div>
      <h1>Interfaz de Escáner</h1>
      {!isConnected ? (
        <button onClick={selectAndConnectDevice}>
          Seleccionar y Conectar Dispositivo
        </button>
      ) : (
        <button onClick={connectAndScan} disabled={isScanning}>
          {isScanning ? "Escaneando..." : "Iniciar Escaneo"}
        </button>
      )}
      {isConnected && <p>Dispositivo conectado: {device.productName}</p>}
      {scanResult && <div>Resultado del Escaneo: {scanResult}</div>}
      {errorMessage && <p style={{ color: "red" }}>{errorMessage}</p>}
    </div>
  );
}

export default Scaner;