<script setup lang="ts">
import { ref } from 'vue'
import { ImportWalletComponent, OpenWalletComponent } from '.'

const emit = defineEmits<{ goToCreate: [] }>()

const stage = ref<'import' | 'password'>('import')
const importData = ref<any>(null)

const handleImported = (payload: {
    type: 'seed' | 'privatekey'
    value: string | string[]
    passphrase?: string
}) => {
    importData.value = payload
    stage.value = 'password'
}

const handleNavigateToCreate = () => {
    emit('goToCreate')
}
</script>
<template>
    <div class="login-tab">
        <ImportWalletComponent v-if="stage === 'import'" @import-success="handleImported" />
        <OpenWalletComponent v-else @navigateToCreate="handleNavigateToCreate" />
    </div>
</template>
<style lang="scss" scoped>
.login-tab {
    padding: var(--spacing-lg);
}
</style>
