<template>
    <div class="modale-overlay">
        <div class="modale-card d-flex flex-column p-2" >
            <span class="p-2">Chose a token</span>
            <hr/>
            <div v-for="token in availableTokens" :key="token.sigle" class="d-flex flex-column tokens-available p-2">
                <crypto-display :token="token"  :withChevronDown="false" @click="selectToken(token)"></crypto-display>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CryptoDisplay from './CryptoDisplay.vue';
export default {
  components: { CryptoDisplay },
    name: "CryptoSelectorDialog",
    emits: ['tokenSelected'],
    computed: {
        ...mapGetters('crypto', ['currentToken', 'availableTokens']),
        logoCurrentToken() {
            switch (this.currentToken?.symbol) {
                case "MATIC":
                    return "@/assets/crypto/currency/polygon-matic-logo.png";
                case "USDC":
                    return "@/assets/crypto/currency/usd-coin-usdc-logo.svg";
                default:
                    return "";
            }
        }
    },
    methods: {
        selectToken(token) {
            this.$emit("tokenSelected", token);
        }
    },
    mounted() {
        
    }
}
</script>

<style lang="scss" scoped>
.modale-overlay {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1031;
}

.modale-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 8px;
    width: 250px;
}

.tokens-available {
    gap: 3px;
    align-items: left;
}
</style>