/** @author Mansi 
 * FileName: TagInput.tsx
 * Description: This file contains the TagInput component.
*/
'use client';
import { ChangeEvent, useEffect, useState } from "react";
import styles from "./TagInput.module.scss";

/**
 * Checks if the current browser is Google Chrome.
 * It uses the user agent string to determine if the browser is Chrome,
 * excluding other Chromium-based browsers like Edge, Opera, and Brave.
 *
 * @returns {boolean} True if the browser is Chrome, false otherwise.
 */

function isChromeBrowser() {
  const userAgent = navigator.userAgent;
  const isChrome = /chrome|crios/i.test(userAgent) && !/edg|opr|brave/i.test(userAgent);
  return isChrome;
}

// Props interface for TagInput component
interface TagInputProps {
  input: string;
  setInput: (input: string) => void;
  value?: string[];                  // Current array of tags
  onChange: (tags: string[]) => void; // Callback when tags change
  setValue: (key: string, value: string[]) => void;
  className?: string;
  ref?: React.RefObject<HTMLInputElement>;
  setActiveField?: (field: string) => void;
  onFocus?: () => void;
  onBlur?: () => void;
}

const TagInput = ({ input = "", setInput, setValue, value = [], onChange, className, ref, setActiveField, onFocus, onBlur }: TagInputProps) => {

  const [isChrome, setIsChrome] = useState(false);

  /**
   * Adds a new tag if it's not already present and input is valid.
   */
  const handleInputChange = (inputValue) => {
    const trimmed = inputValue.trim();
    if (trimmed && !value.includes(trimmed)) {
    }
    onChange([...value, trimmed]);
  }

  /**
   * Removes a tag by index
   */
  const removeTag = (index: number) => {
    // onChange(value.filter((_, i) => i !== index));
    setValue('countryName', value.filter((_, i) => i !== index));
  };

  useEffect(() => {
    setIsChrome(isChromeBrowser());
  }, []);

  return (
    <div className={`${styles.InputBox} InputBox mt-1.5 ${isChrome ? '!overflow-auto' : '!overflow-x-scroll'} !pb-1.5 !rounded-none`}>
      {Array.isArray(value) && value.length > 0 &&
        value?.map((tag, index) => (
          <div key={index} className={`tag ${styles.tag}`}>
            <span>{tag}</span>
            <i className={`Icon IconCross remove ${styles.remove}`}
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation
                removeTag(index)
              }}
            >
            </i>
          </div>
        ))}
      <input
        className={`input ${styles.input} ${className ? className : ''}`}
        id="where-search"
        value={input}
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          setInput(e.target.value)
          handleInputChange(e.target.value);
        }
        }
        placeholder="Country"
        ref={ref}
      />
      {/* <button
            type="button"
            className={`xl:!hidden secondaryBtn !w-auto min-w-[100px] !min-h-[44px] shrink-0 ${
              input?.length < 2
                ? "opacity-50 cursor-not-allowed"
                : "opacity-100 cursor-pointer"
            }`}
            onClick={handleInputChange}
            disabled={input.trim().length < 2}
          >
            Add
          </button> */}
    </div>
  );
};

export default TagInput;