<template>
    <div>
        <div @click="showCryptoSelector">
            <crypto-display :token="currentToken" :withChevronDown="true"></crypto-display>
        </div>
        <crypto-selector-dialog v-if="isCryptoSelectorVisible" @tokenSelected="hideCryptoSelector"></crypto-selector-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import CryptoDisplay from './CryptoDisplay.vue';
import CryptoSelectorDialog from './CryptoSelectorDialog.vue';
import typeActions from '../../store/typeActions';

export default {

    components: {
        CryptoSelectorDialog,
        CryptoDisplay
    },
    emits: ["tokenSelected"],
    name: "CryptoSelector",
    data() {
        return {
            isCryptoSelectorVisible: false,
            //displaySelector: true,
        };
    },
    computed: {
        ...mapGetters('crypto', ['currentToken']),
        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: {
        showCryptoSelector() {
            this.isCryptoSelectorVisible = true;
        },
        hideCryptoSelector(token) {
            ////console.log(token);
            this.$store.dispatch(typeActions.setCurrentToken, token);
            this.isCryptoSelectorVisible = false;
            this.$emit("tokenSelected");
        }
    },
    // // mounted() {
    // //     console.log("currentCrypto => ", this.currentToken, this.$route.query.matic);
    // //     if (this.$route.query.matic) {
    // //         this.displaySelector = true;
    // //     }
    // // }
}
</script>

<style lang="scss" scoped>
.logo-token {
    width: 20px;
    height: 20px;
}

.token-selector {
    gap: 3px;
    align-items: center;
    border-radius: 25px;
    padding: 1px 10px;
    cursor: pointer;
}
</style>