import axios from 'axios';
import 'alpinejs';
import wNumb from 'wnumb';

var units = window.units = {
    currency: wNumb({
        mark: ',',
        thousand: '.',
        prefix: '',
        suffix: '',
        decimals: 0
    }),
    decimalCurrency: wNumb({
        mark: ',',
        thousand: '.',
        prefix: '',
        suffix: '',
        decimals: 2
    }),
    percent: wNumb({
        mark: ',',
        thousand: '',
        prefix: '',
        suffix: '',
        decimals: 2
    })
};


window.stepper = {
    errors: {},
    parts: {
        notar: 0.02,
        grundsteuer: 0.065,
        makler: 0.0357
    },
    units: units,
    step: 0,
    greetings: [ 
        { value: 'frau', label: 'Frau' },
        { value: 'herr', label: 'Herr' },
        { value: 'divers', label: 'Divers' },
    ],
    jobs: [ 
        { value: 'angestellt', label: 'Angestellte*r' },
    ],
    titles: [
        { value: 'prof', label: 'Prof' },
        { value: 'dr', label: 'Dr' },
    ],
    value: {
        datenschutz: false,
        kind: null,
        kauf: {
            kaufpreis: 300000,
            modernisierung: 0,
            baukosten: 0,
            eigenkapital: 0,
        },
        bau: {
            grundstueckspreis: 300000,
            bezahlt: '0',
            baukosten: 0,
            eigenkapital: 0,
        },
        anschluss: {
            objektwert: 300000,
            umschuldung: 50000,
            zuskap: 50000
        },
        wert: 300000,
        umschuldung: 0,
        kapital_zus: 0,
        greeting: null,
        title: null,
        firstname: '',
        lastname: '',
        zip: '',
        location: '',
        phone: '',
        email: '',
        job: '',
        haushalt: '',
        einnahme: '',
        energetisch: false,
        modernisierung: false,
    },
    kinds: [
        {label: 'Kauf einer Immobilie', value: 'kauf', icon: 'immobilienfinanzierung'},
        {label: 'Eigenes Bauvorhaben', value: 'bau', icon: 'bauvorhaben'},
        {label: 'Anschlussfinanzierung', value: 'anschluss', icon: 'anschlussfinanzierung'}
    ],

    /* Methods */
    svg(icon) {
        return `<svg class="icon-${icon}"><use xlink:href="${this.sprite}#${icon}"></use></svg>`;
    },

    submit() {
        axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
            ...this.value
        }).then(ret => {
            if (ret.data !== undefined && ret.data.errors !== undefined) {
                this.errors = ret.data.errors;
            } else {
                this.errors = {};
                this.slideTo(null, this.step+1);

                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(window.arguments);}
                gtag('js', new Date());

                gtag('config', 'AW-394678894');
            }
        });
    },

    error(field) {
        return this.errors[field] === undefined ? '' : this.errors[field];
    },

    slideTo(e, index) {
        if (e !== null) {
            e.preventDefault();
        }

        var _self = this;
        this.step = index;

        if (index === 0) {
            window.setTimeout(function() {
                _self.value.kind = null;
            }, 500);
        }

        this.$nextTick(function() {
            _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
        });
    },
};