import { useDmStore } from '@/app/store';
import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
import React, { useCallback, useEffect, useRef, useState } from 'react';

type thisProps = {
  label: string | undefined;
  initValue: string | undefined;
  setValue : (dmdCoNm?: string) => void;
  setRtnData : (rtnData: DemandCompType[]) => void;
}

export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
  
  const { getDemandCompList, Sdm } = useDmStore((state) => state);

  const { 
    demandCompList 
  } = Sdm;
  
  const [isOpen, setIsOpen] = useState(false);
  const [textValue, setTextValue] = useState(initValue || '');
  const wrapperRef = useRef<HTMLDivElement>(null);
  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setTextValue(value);
    setValue(value);
    if (value) {
      setIsOpen(true);
      getDemandCompList(value, 20);
    } else {
      setIsOpen(false);
    }
  }, [getDemandCompList, setValue]);

  const handleSuggestionClick = useCallback((dmdCoNm: string) => {
    setTextValue(dmdCoNm);
    setValue(dmdCoNm);
    setIsOpen(false);
    setRtnData(demandCompList);
  }, [demandCompList, setRtnData, setValue]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div ref={wrapperRef}>
      <input
        type="text"
        value={textValue}
        onChange={handleInputChange}
        /* onFocus={() => setIsOpen(true)} */
        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder={`${label}을(를) 입력하세요`}
      />
      {isOpen && (
        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
          <div className="max-h-72">
            {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => (
              <div
                key={index}
                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
                onClick={() => handleSuggestionClick(item.dmdCoNm)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    handleSuggestionClick(item.dmdCoNm);
                  }
                }}
              >
                {item.dmdInfoId.substring(10,14) !== '0000' ? (
                  <>
                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoId.substring(10,14)}&nbsp;
                  </>
                ) : (
                  <>
                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
                  </>
                )}
                <span className="float-right">{item.dmdCoNm}</span>
              </div>
            )) : (
              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
                검색 결과가 없습니다.
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}