<template>
    <div class="row no-margin">
        <div class="col">
            <div class="row m-b-10 align-items-center parentContainer">
                <div class="col p-l-0">
                    <div class="font-heading all-caps fs-10 hint-text muted">
                        Supplier Currencies
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-3 m-r-15 m-b-15 b-a pointer p-t-20 p-b-20" :class="[{'b-success': parameters.currencies.includes(item.id)}, {'b-grey': !parameters.currencies.includes(item.id)}]" v-for="item in $store.getters.getListData('convertibleCurrenciesSection')" v-bind:key="item.id" @click="toggleCurrencies(item.id)">
                    <div class="absolute" style="top: -12px; right: -27px;" v-if="parameters.currencies.includes(item.id)">
                        <div class="icon-thumbnail icon-25 bg-success text-white btn-rounded fs-10">
                            <i class="fa fs-10 fa-check"></i>
                        </div>
                    </div>
                    <currency-component :deleteable="false" section="suppliersSection" :data="item"></currency-component>
                </div>
            </div>
            <div class="row" v-show="currenciesChanged">
                <div class="col-9 no-padding">
                    <button class="btn btn-xs btn-default bg-master-lighter b-rad-none" @click="resetCurrencies()">Reset Changes</button>
                    <button class="btn btn-xs btn-success b-rad-none" @click="submit(route('api.company.supplier.currencies.update', item.id), 'put', section, true, true)">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
          section: {
              required: true
          }
        },
        data(){
            return {
                originalCurrencies: [],
                parameters: {
                    currencies: this.convertCurrenciesToArray(this.data.currencies)
                }
            }
        },
        created() {
            this.originalCurrencies = this.staticCurrencies(this.convertCurrenciesToArray(this.data.currencies));
        },
        computed: {
            currenciesChanged(){
                let vm = this;
                return !(vm.originalCurrencies.length === vm.parameters.currencies.length && vm.originalCurrencies.every(function(element, index) { return element === vm.parameters.currencies[index]}))
            }
        },
        methods: {
            toggleCurrencies(value) {
                let index = this.parameters.currencies.indexOf(value);
                index === -1 ? this.parameters.currencies.push(value) :
                    this.parameters.currencies.splice(index,1);
            },
            convertCurrenciesToArray(currencies){
                return currencies.map(function(value){
                    return value.id;
                })
            },
            resetCurrencies(){
                this.parameters.currencies = this.staticCurrencies(this.originalCurrencies);
            },
            staticCurrencies(currencies){
                return currencies.length ? currencies.join(', ').split(', ').map(function(value) {
                    return parseInt(value);
                }): []
            },
            successHandler(){
                this.originalCurrencies = this.staticCurrencies(this.parameters.currencies)
                this.updateList();
            }
        },
        mixins: [componentHandler]
    }
</script>