import React, { useState } from "react";
import { Flex, Result, Input } from "antd";

const OTPInput = ({}) => {
  const [otp, setOtp] = useState("");

  const handleOtpChange = (value) => {
    setOtp(value);

    // Check if all 6 digits have been entered
    if (value.length === 6) {
      // Send IPC command to authenticate with OTP
      if (window.electronAPI) {
        window.electronAPI.sendIPC("authenticateOTP", value);
      }
    }
  };

  return (
    <Flex
      style={{ width: "100%", height: "100%" }}
      justify="center"
      align="center"
    >
      <Flex gap="large" align="center">
        <Result
          title="Enter Passcode To Continue"
          subTitle="Please enter a one time passcode in order to authenticate the host."
        >
          <Flex justify="center">
            <Input.OTP
              size="large"
              value={otp}
              onChange={handleOtpChange}
              length={6}
            />
          </Flex>
        </Result>
      </Flex>
    </Flex>
  );
};

OTPInput.propTypes = {};

export default OTPInput;
