<script setup lang="ts">
import { ref, watch } from 'vue'
import { FormCommon } from '@/components'

const emit = defineEmits<{
    (e: 'update:valid', valid: boolean): void
    (e: 'submit', keystore: string): void
}>()

const keystore = ref('')
const keystoreError = ref('')

// Watch keystore and emit validity
watch(
    [keystore, keystoreError],
    () => {
        const isValid = !!keystore.value.trim() && !keystoreError.value
        emit('update:valid', isValid)
    },
    { immediate: true }
)

const validateKeystore = () => {
    if (!keystore.value.trim()) {
        keystoreError.value = 'Please enter your keystore.'
        return false
    }
    keystoreError.value = ''
    return true
}

const handleSubmit = () => {
    if (validateKeystore()) {
        emit('submit', keystore.value)
    }
}

defineExpose({
    handleSubmit,
})
</script>

<template>
    <div class="keystore-tab">
        <div class="form-row mb-md">
            <FormCommon
                v-model="keystore"
                type="text"
                label="Keystore"
                placeholder="Enter keystore"
                :error="keystoreError"
                @focus="keystoreError = ''"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.keystore-tab {
    .form-row {
        margin-top: 19px;
        margin-bottom: 4px;
    }
    .mb-md {
        margin-bottom: 14px;
    }
}
</style>

