"use client";
import {useRouter} from "next/navigation";
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

interface ChildComponentProps {
  onTrackingNoValueChange?: (value: string) => void;
  params?: { lang: string };
  searchParams?: { [tn: string]: any | string[] } | undefined;
}

export default function Banner({
  onTrackingNoValueChange,
  params,
  searchParams,
}: ChildComponentProps) {
  const [inputValue, setInputValue] = useState<string>("");
  const [showOutput, setShowOutput] = useState<boolean>(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const router = useRouter();

  const onSubmit = async (res: any) => {
   
    router.push(`/track/track_detail/?tn=${inputValue}`);
    setShowOutput(true);
    setTimeout(() => {
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth',
      });
    }, 500);
  };

  const handleChange = (e: any) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    if (onTrackingNoValueChange) {
      onTrackingNoValueChange(newValue);
    }
  };
  const handleKeyDown = (event:any) => {
 
    if (event.keyCode === 13) {
     
      return  onSubmit;
    }
  };


  return (
    <React.Fragment>
      <div className="flex flex-row items-center justify-center relative track-bg bg-no-repeat bg-cover" >
      <div className="w-full h-[700px]" />
        <h1 className="absolute top-2/1 text-white text-center w-full text-xl md:text-4xl lg:text-4xl py-0">
          Track your Shipment
        </h1>
        {/* <div className="dash"></div> */}
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="absolute bottom-1/4 bg-white p-1 flex flex-row md:flex-row items-center text-xs w-[80%] md:w-[50%] lg:w-[40%]"
        >
          <input
            className="w-full md:w-[85%]  md:mb-0 px-3  text-gray-700 text-sm leading-tight focus:outline-none focus:shadow-outline"
            id="tracknum"
            type="text"
             maxLength={80}
             required
            placeholder="Enter Lot or VIN"
            value={inputValue}
            onChange={handleChange}
            onKeyUp={handleKeyDown}
          />
           
              <button
                type="submit"
                className="w-full md:w-[15%] bg-red-600 hover:bg-red-500 text-white px-2 py-3 focus:outline-none focus:shadow-outline"
              >
                Track
              </button>
            </form>
          </div>
      
      
    </React.Fragment>
  );
}