// InputField.js
import React from 'react';

export default function InputField({ onSubmit }) { // 接收一個(gè)名為 onSubmit 的 prop
  function handleSubmit(e) {
    e.preventDefault(); // 阻止瀏覽器默認(rèn)的表單提交行為

    const form = e.target;
    const inputVal = form.myInput.value; // 獲取輸入框的值

    console.log("子組件獲取到的輸入值:", inputVal);

    // 調(diào)用父組件傳遞進(jìn)來的回調(diào)函數(shù)，并將輸入值作為參數(shù)傳遞
    if (onSubmit && typeof onSubmit === 'function') {
      onSubmit(inputVal); 
    }
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <input name="myInput" id="adress-field" placeholder="Enter adress" autoComplete="on" />
      <button type="submit" id="adress-button">Send</button>
    </form>
  );
}

// App.js
import './App.css';
import AccountNumber from "./components/AccountNumber";
import InputField from "./components/InputField";
import { useEffect, useState } from "react";

function App() {
  // 狀態(tài)用于存儲從 InputField 接收到的地址值
  const [searchValue, setSearchValue] = useState(null); 

  // 狀態(tài)用于存儲API返回的tokens數(shù)據(jù)
  const [tokens, setTokens] = useState([]);
  // 狀態(tài)用于管理加載狀態(tài)
  const [loading, setLoading] = useState(false);

  // 定義一個(gè)回調(diào)函數(shù)，用于接收 InputField 傳遞過來的值
  const handleSearchSubmit = (val) => {
    setSearchValue(val); // 更新 searchValue 狀態(tài)
  };

  // useEffect 鉤子用于在 searchValue 變化時(shí)觸發(fā)數(shù)據(jù)請求
  useEffect(() => {
    // 只有當(dāng) searchValue 不為 null 且不為空字符串時(shí)才進(jìn)行數(shù)據(jù)請求
    if (searchValue) { 
      setLoading(true);
      fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`)
        .then(response => response.json())
        .then(json => setTokens(json))
        .finally(() => {
          setLoading(false);
        });
      console.log("App組件發(fā)起請求，searchValue:", searchValue);
    }
    // 依賴數(shù)組包含 searchValue，確保當(dāng) searchValue 改變時(shí) useEffect 重新運(yùn)行
  }, [searchValue]); 

  // ... (其他輔助函數(shù)，如 round, numberWithSpaces 保持不變)

  return (
    <content className="content">
        <div className="up-side">
            <div className="account-number-box">
                <p id="p-account-number">Total number of accounts</p>
                <p id="account-number"><AccountNumber/></p>
            </div>
            <div className="adress-search">
                {/* 將 handleSearchSubmit 函數(shù)作為 onSubmit prop 傳遞給 InputField */}
                <InputField onSubmit={handleSearchSubmit} /> 
            </div>
            {/* 可以顯示當(dāng)前 searchValue 進(jìn)行調(diào)試 */}
            <p>當(dāng)前搜索地址: {searchValue || '未輸入'}</p>
        </div>
        <div className="down-side">
            <table className="Token-section-output">
              {loading ? (
                <div>Loading...</div>
              ) : (
                <>
                  <h1>Tokens</h1>
                  <table className='Token-section-output' border={0}>
                    <tr className='token-row-type'>
                      <th className='token-column'>Name</th>
                      <th className='center-column'>Price</th>
                      <th>Hold</th>
                    </tr>
                    <tr className="space20"/>
                    {tokens.map(token => (
                      <tr className='token-row' key={token.id}>
                        <td className='token-column'>
                        <img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} /> 
                          <p>{token.name}</p> 
                        </td>
                        <td className='center-column'> <p>${round(token.price, 10000000)}</p> </td>
                        <td> 
                          <p>{round(token.balance / Math.pow(10, token.decimals), 10000000)}</p> 
                          <p className='token-hold'>${round(token.valueUsd, 10000000)}</p>
                        </td>
                      </tr>
                    ))}
                  </table>
                </>
              )}
            </table>
        </div>   
    </content>
  );
}

// 輔助函數(shù)（保持不變）
function round(nr, ten) { 
    return Math.round(nr * ten) / ten;
}

function numberWithSpaces(nr) { 
    return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

export default App;