import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { motion } from 'framer-motion';

const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
  const [tokenId, setTokenId] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [showDropdown, setShowDropdown] = useState(false);

  useEffect(() => {
    if (tokenId) {
      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();
    } else {
      setShowDropdown(false);
    }
  }, [tokenId]);

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

  const handleSelectToken = (token) => {
    setTokenId(token);
    setShowDropdown(false);
  };

  const handleSubmit = () => {
    onSubmit(tokenId);
    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 tokens short code, that you will think boom anytime soon</p>
        <div className="relative">
          <input
            type="text"
            value={tokenId}
            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)}
                  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.toLocaleString()}</span>
                      <span>0x...{result.baseToken.address.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>
          )}
        </div>
        <button
          onClick={handleSubmit}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"
        >
          Submit
        </button>
      </div>
    </motion.div>
  ) : null;
};

export default CalloutModal;