import { useWallet } from './provider.jsx'
import {useState} from "react";
import styles from './style.module.less'

function BlockItem ({title,children}) {
    return (
        <div className={styles.block}>
            <h2>{title}</h2>
            <div>
            {children}
            </div>
        </div>
    )
}

function SendBlock({title, run,params={},isObject = true}) {
    const [requestParams, setRequestParams] = useState(params)
    const [result, setResult] = useState('')
    const {unielon} = useWallet()
    const sendAction = async () => {
        try {
            console.log(`requestParams::`,requestParams)
            const res = await unielon[run](isObject?JSON.parse(requestParams):requestParams)
            setResult(JSON.stringify(res))
        } catch (e) {
            setResult(e?.message || `${JSON.stringify(run)} == Error`)
        }
    }
    if(!run) return null
    return (
        <BlockItem title={title}>
            <div>
                <div className={styles.params}>params:</div>
                <div>
                    <textarea value={requestParams} onChange={e => {
                        setRequestParams(e.target.value)
                    }}/></div>
                <div>
                    <button onClick={sendAction}>{title}</button>
                </div>
            </div>
            {result &&
                <div className={styles.result}>
                    <h3>Request Result</h3>
                    <div className={styles.text}>{result}</div>
                </div>
            }
        </BlockItem>
    )
}

function App() {
    const {address,unielon} = useWallet()
    console.log(`unielon::`,unielon)
    const [singMessage, setSingMessage] = useState('')
    const [msgText, setMsgText] = useState('')
    return (
        <div className={styles.container}>
          <div className={styles.flex_c_sb}>
              <h2>{address||'Unielon wallet not connected'}</h2>
              <button onClick={()=> address ? unielon.disConnect() : unielon.requestAccounts()}>{address?'Disconnect Unielon Wallet':'Connect Unielon Wallet'}</button>
          </div>
            <SendBlock isObject={false} title='Sing Message' run="signMessage" params="single a message test" />
            <SendBlock title='Send Transaction(sendDogecoin)' run="sendDogecoin" params={`{"op":"mint","amt":"1000000000","tick":"UNIX"}`} />
            <SendBlock title='Send Trade' run="sendTrade" params={`{to:'',value:0}`} />
            <SendBlock title='Send Box' run="sendBox" params={`{to:'',value:0}`} />
            <SendBlock title='Create Staking Lp' run="createLp" params={`{to:'',value:0}`} />
            <SendBlock title='Create Swap' run="createSwap" params={`{to:'',value:0}`} />
            <SendBlock title='Send Nft' run="sendNft" params={`{"op":"mint","amt":"1000000000","tick":"UNIX"}`} />
        </div>
    )
}

export default App