<script setup lang="ts">
import { onMounted, ref } from 'vue';
import pingWidget from '../lib/main';
import { ethToEthermint, ethermintToEth } from '../lib/utils/format';
import { decodeTxRaw } from '@cosmjs/proto-signing';

// const sender = 'evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z';
// const endpoint = 'https://api-cosmoshub-ia.cosmosia.notional.ventures'// 'https://rest.stargaze-apis.com';
// const endpoint = 'https://api.uni.junonetwork.io'
function h2b(s: string) {
    return new Uint8Array([...s.matchAll(/../g)].map(m => parseInt(m[0], 16)));
} 

const hex_tx = '1282020aa9010aa6010a242f636f736d7761736d2e7761736d2e76312e4d736745786563757465436f6e7472616374127e0a2e6e657574726f6e31353371756e78393565687a7138737277757739353375766c7a343436356b386167327276676d12426e657574726f6e316c7a77396a6d6167386b6a37707934367a38337a75766c7778393434613377653368396e77653830346c70307165783371613971767038326c341a087b22223a207b7d7d12520a4e0a460a1f2f636f736d6f732e63727970746f2e736563703235366b312e5075624b657912230a2102b3ae8927aec11eefa356313d99b4b4f8508d5e071d2bf5c4f2945e6df021283712020a00180412001a00'
const tx = decodeTxRaw(h2b(hex_tx))
console.log(tx)

interface Config {
    sender: string,
    endpoint: string;
    chainId: string;
    hdPath: string;
    chainName: string
    params: string
}

// @ts-ignore
const EVMOS: Config = {
    sender: 'evmos1ayp22xk4nwc9lhjh6tvdat2j2klnvvk29yx87m',
    endpoint: 'https://rest.bd.evmos.org:1317',
    chainId: 'evmos_9001-2',
    hdPath: "m/44'/60/0'/0/0",
    chainName: 'evmos',
    params: JSON.stringify({
        proposal_id: '1',
        validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
        chain_name: 'evmos',
        contract: 'add',
        fees: { amount: '6000000000000000', denom: '', },
    })
}

// @ts-ignore
const JUNO: Config = {
    sender: 'juno1jxv0u20scum4trha72c7ltfgfqef6nscych5nn',
    endpoint: 'https://juno-api.polkachu.com',
    chainId: 'juno-1',
    hdPath: "m/44'/118/0'/0/0",
    chainName: 'juno',
    params: JSON.stringify({
        proposal_id: '1',
        validator_address: "junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2",
        chain_name: 'juno',
        contract: 'juno1qnxfl3j95h9s436jvwj06w5ha8hx6zmql6v396xwqr9zecrwtutst9kxpu',
        fees: {amount: '2000', denom: ''}
    })
}

// @ts-ignore
const NEUTRON: Config = {
    sender: 'neutron1m8mma95ta2zajqtmfp5c5y3wgeyqzcrc64e4gx',
    endpoint: 'https://neutron-api.polkachu.com',
    chainId: 'neutron-1',
    hdPath: "m/44'/118/0'/0/0",
    chainName: 'neutron',
    params: JSON.stringify({
        chain_name: 'neutron',
        contract: 'neutron198sxsrjvt2v2lln2ajn82ks76k97mj72mtgl7309jehd0vy8rezs7e6c56',
        fees: {amount: '2000', denom: ''}
    })
}

// @ts-ignore
const COSMOS: Config = {
    sender: 'cosmos1jxv0u20scum4trha72c7ltfgfqef6nscj25050',
    endpoint: 'https://rest.cosmos.directory/cosmoshub',
    chainId: 'cosmoshub-4',
    hdPath: "m/44'/118/0'/0/0",
    chainName: 'cosmos',
    params: JSON.stringify({
        proposal_id: '1',
        validator_address: "cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu",
        chain_name: 'cosmos',
        contract: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
        fees: {amount: '6000', denom: ''}
    })
}

// @ts-ignore
const Archway: Config = {
    sender: 'archway1jtdje5vq42sknl22r4wu9sahryu5wcrd3yd7z8',
    endpoint: 'https://api.constantine.archway.tech',
    chainId: 'constantine-3',
    hdPath: "m/44'/118/0'/0/0",
    chainName: 'archway',
    params: JSON.stringify({
        chain_name: 'archway',
        contract: 'archway1tc7k4683zqn8krm3vq7ed5jd4l23c2h9kyswc75zpc8aeln6smqsz79j44',
        fees: {amount: '2000', denom: ''}
    })
}

// @ts-ignore
const btc: Config = {
    sender: 'bc1qjdyxk9t90jxmeqpdwkn8cd7nj6cu7x3m688xlj',
    endpoint: 'https://devnet-2-rest.side.one',
    chainId: 'taproot-1', // side-testnet-1
    hdPath: "m/44'/118/0'/0/0",
    chainName: 'S2-testnet-2',
    params: JSON.stringify({
        // wallet: ['okex', 'unisat']
        // proposal_id: '1',
        // validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
        // chain_name: 'evmos',
        // contract: 'add',
        // fees: {amount: '6000000000000000', denom: ''}
    })
}


const conf = ref(JUNO)
// const conf = ref(btc)

const types = [
    'send',
    'delegate',
    'vote',
    'redelegate',
    'unbond',
    'transfer',
    'deposit',
    'withdraw',
    'withdraw_commission',
    'wasm_instantiate_contract',
    'wasm_execute_contract',
    'wasm_store_code',
    'wasm_migrate_contract',
    'wasm_update_admin',
    'wasm_clear_admin',
];
const toOpen = ref('send');

const theme = ref('light');
const switchTheme = () => {
    if (theme.value === 'light') {
        theme.value = 'dark';
        document.documentElement.classList.add('dark');
    } else {
        theme.value = 'light';
        document.documentElement.classList.remove('dark');
    }
    document.documentElement.setAttribute('data-theme', theme.value);
};

onMounted(() => {
    document.documentElement.classList.add('light');
    document.documentElement.setAttribute('data-theme', 'light');
});
const walletStateChange = (res: any) => {
   console.log(res, 'resres');
};

console.log("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1")
console.log(ethToEthermint("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1", "evmos"))
console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))

</script>

<template>
    <div class="bg-gray-50 dark:bg-base-100 dark:text-white min-h-[100vh]">
        Ping Widget Version: {{ pingWidget?.version }}

        <div class="btn btn-sm normal-case" @click="switchTheme()">
            Theme: {{ theme }}
        </div>

        <div>&nbsp;</div>
        <ping-connect-wallet
            :chain-id="conf.chainId"
            :hd-path="conf.hdPath"
            @change="walletStateChange"
        />

        <textarea v-model="conf.params" cols="80" rows="5"></textarea>
        <div></div>

        <select v-model="toOpen">
            <option v-for="i in types">{{ i }}</option>
        </select>

        <br />

        <label :for="toOpen" class="btn">{{ toOpen }}</label>
        <ping-tx-dialog
            :type="toOpen"
            :sender="conf.sender"
            :registry-name="conf.chainName"
            :endpoint="conf.endpoint"
            :hd-path="conf.hdPath"
            :params="conf.params"
        ></ping-tx-dialog>

        <br />
        // example:<br />
        <label for="withdraw" class="btn">Withdraw</label>
        <ping-tx-dialog
            type="withdraw"
            :sender="conf.sender"
            :endpoint="conf.endpoint"
            :hd-path="conf.hdPath"
            :params="conf.params"
        ></ping-tx-dialog>

        <label for="store_code" class="btn">Store Code</label>
        <ping-tx-dialog
            type="store_code"
            :sender="conf.sender"
            :endpoint="conf.endpoint"
            :registry-name="conf.chainName"
            :hd-path="conf.hdPath"
            :params="conf.params"
        ></ping-tx-dialog>

        <label for="PingTokenConvert" class="btn">Token Convert</label>
        <ping-token-convert
            :chain-name="conf.chainName"
            :endpoint="conf.endpoint"
            hd-path="m/44'/118/0'/0/0"
        ></ping-token-convert>
    </div>
</template>

<style scoped></style>
