import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { motion } from 'framer-motion';
import debounce from 'lodash/debounce';

const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
  const [tokenId, setTokenId] = useState('');
  const [tokenName, setTokenName] = useState('');
  const [tokenContract, setTokenContract] = useState('');
  const [tokenInput, setTokenInput] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [showDropdown, setShowDropdown] = useState(false);
  const [shouldSearch, setShouldSearch] = useState(true);

  useEffect(() => {
    if (tokenId && shouldSearch) {
      const fetchData = async () => {
        try {
          const response = await axios.get(`https://api.dexscreener.io/latest/dex/search/?q=${tokenId}`);
          setSearchResults(response.data.pairs || []);
          setShowDropdown(true);
        } catch (error) {
          console.error('Error fetching data:', error);
          setShowDropdown(false);
        }
      };
      fetchData();
    }
  }, [tokenId, shouldSearch]);

  const debouncedSearch = useCallback(debounce((value) => {
    setShouldSearch(true);
    setTokenId(value);
  }, 500), []);

  const handleTokenChange = (e) => {
    setTokenInput(e.target.value);

    setTokenContract("");
    
    setShouldSearch(false);
    debouncedSearch(e.target.value);
  };

  const handleSelectToken = (token, name, ca) => {
    setTokenInput(token);
    setTokenId(token);
    setTokenName(name);
    setTokenContract(ca);
    setShowDropdown(false);
    setShouldSearch(false);
  };

  const handleSubmit = () => {
    onSubmit(tokenId,tokenContract,tokenName);
    onClose();
  };

  return isOpen ? (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-bg"
    >
      <div className={`bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal ${showDropdown ? 'h-1/2' : 'h-auto'}`}>
        <div className="flex items-start">
          <h2 className="text-xl font-bold mb-2">Make a new call!</h2>
          <button
            className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
            onClick={onClose}
          >
            <span className="bg-transparent text-black h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
          </button>
        </div>

        <p className="text-lg mb-4">Type in a token short code that you think will boom anytime soon</p>
        <div className="relative">
          <input
            type="text"
            value={tokenInput}
            onChange={handleTokenChange}
            className="w-full p-2 mb-4 border rounded glassmorphism"
            placeholder="Enter token short code"
          />
          {showDropdown && (
            <ul className="absolute z-10 w-full bg-black border rounded shadow-lg max-h-60 overflow-y-auto">
              {searchResults.map((result) => (
                <li
                  key={result["pairId"]}
                  onClick={() => handleSelectToken(result["baseToken"]["symbol"],result["baseToken"]["name"], result["baseToken"]["address"])}
                  className="p-2 hover:bg-gray-400 cursor-pointer flex justify-between items-center glassmorphism-scroller"
                >
                  <div className="flex flex-col w-3/4">
                    <div className="flex justify-between">
                      <span>{result["baseToken"]["symbol"]} - {result["baseToken"]["name"]}</span>
                      <span>{result["chain"]}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>24H Vol: ${result["volume"]["h24"]}</span>
                      <span>0x...{(result["baseToken"]["address"] as string).slice(-4)}</span>
                    </div>
                  </div>
                  <div className="w-1/2 text-right">
                    <span className="text-lg font-bold ml-2">${result["priceUsd"]}</span>
                  </div>
                </li>
              ))}
            </ul>
          )}
        <p className="text-sm">{tokenContract.length > 0 ? "name: " +tokenName : ""}</p>

        <p className="text-sm mb-5">{tokenContract.length > 0 ? "ca: " +tokenContract : ""}</p>
          
        </div>
        <button
          onClick={handleSubmit}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"
        >
          Callout!
        </button>
      </div>
    </motion.div>
  ) : null;
};

export default CalloutModal;