<template>
    <div class="row">
        <div class="col">
            <div class="row" style="margin-left:1px; margin-right:1px;" v-if='selectedCurrency'>
                <div class="col bg-primary text-white">
                    <div class="row h-100 align-items-center">
                        <div class="col-auto p-r-0">
                            <span class="p-t-20 p-b-20 flag-icon fs-14"
                                :class="'flag-icon-' + selectedCurrency.country.short_code.toLowerCase()"></span>
                        </div>
                        <div class="col p-l-5 p-r-20">
                            {{ selectedCurrency.short_code }}
                        </div>
                        <div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
                            <div class="row align-items-center bg-primary-light h-100">
                                <div class="col ">
                                    <i class="fa fa-angle-down fs-14 m-t-5"
                                        :class="[{ 'fa-angle-down': !recipientMenu }, { 'fa-angle-up': recipientMenu }]"></i>
                                </div>
                            </div>
                        </div>
                        <div class="relative w-100 text-master">
                            <div class="absolute w-100 b-l b-b b-r b-success" :class="[{ 'hide': !recipientMenu }]"
                                style="top: 100%; right: 0; z-index: 1;">
                                <div class="row text-left no-margin bg-white">
                                    <div class="col no-padding">
                                        <div class="row no-margin" v-for="currency in currencyList"
                                            v-bind:key="currency.id">
                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
                                                :class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
                                                @click="updateCurrency(currency)">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col-auto p-r-5 p-l-0">
                                                                <span class="flag-icon fs-14"
                                                                    :class="'flag-icon-' + currency.country.short_code.toLowerCase()"></span>
                                                            </div>
                                                            <div class="col-auto p-l-5">
                                                                <div class="font-heading fs-12">
                                                                    {{ currency.short_code }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        currecy_id: {
            type: Number,
            required: false,
            default: null
        },
    },
    watch: {
        currecy_id(newValue, oldValue) {
            var currencySelected = this.currencyList.find(currencyList => currencyList.id === newValue);
            this.updateCurrency(currencySelected);
        }
    },
    data() {
        return {
            section: 'chooseCurrencySection',
            currencyList: [
                // {
                //     "id": 1,
                //     "country": {
                //         "id": 1,
                //         "name": "Malaysia",
                //         "short_code": "MY",
                //         "phone_code": "60"
                //     },
                //     "name": "Malaysian Ringgit",
                //     "short_code": "MYR",
                //     "symbol": "RM"
                // },
                {
                    "id": 2,
                    "country": {
                        "id": 2,
                        "name": "China",
                        "short_code": "CN",
                        "phone_code": "86"
                    },
                    "name": "Yuan Renminbi",
                    "short_code": "RMB",
                    "symbol": "¥"
                },
                {
                    "id": 3,
                    "country": {
                        "id": 3,
                        "name": "United States",
                        "short_code": "US",
                        "phone_code": "1"
                    },
                    "name": "US Dollar",
                    "short_code": "USD",
                    "symbol": "$"
                }
            ],
            recipientMenu: false,
            selectedCurrency: null,
        };
    },
    mounted() {
        this.updateCurrency(Object.values(this.currencyList)[0]);
    },
    methods: {
        updateCurrency(currency) {
            this.selectedCurrency = currency;
            this.recipientMenu = false;
            this.$emit('input', currency.id);
        },
    }
}
</script>
