var app = new Vue({
    el: '#app',

    data: {
        resistorResistanceValue: 1,
        resistorToleranceValue: 0,
        resistorValueText: '',
        bandCount: 1,
        availableBands: [
            { id: 0, text: '3' },
            { id: 1, text: '4' },
            { id: 2, text: '5' },
            { id: 3, text: '6' },
        ],
        selectedColors: {
            band1: null,
            band2: null,
            band3: null,
            band4: null, // multiplier
            band5: null, // tolerance
            band6: null  // tempco/ppm
        },
        bandColors: [
            { value: 0,    tolerance: null, multiplier:          1, color: 'Black'  , hex: '#212121', ppm: 250  },
            { value: 1,    tolerance: 1,    multiplier:         10, color: 'Brown'  , hex: '#795548', ppm: 100  },
            { value: 2,    tolerance: 2,    multiplier:        100, color: 'Red'    , hex: '#f44336', ppm: 50   },
            { value: 3,    tolerance: null, multiplier:       1000, color: 'Orange' , hex: '#ff9800', ppm: 15   },
            { value: 4,    tolerance: 5,    multiplier:      10000, color: 'Yellow' , hex: '#ffea00', ppm: 25   },
            { value: 5,    tolerance: 0.5,  multiplier:     100000, color: 'Green'  , hex: '#4caf50', ppm: 20   },
            { value: 6,    tolerance: 0.25, multiplier:    1000000, color: 'Blue'   , hex: '#2196f3', ppm: 10   },
            { value: 7,    tolerance: 0.1,  multiplier:   10000000, color: 'Violet' , hex: '#9c27b0', ppm: 5    },
            { value: 8,    tolerance: 0.05, multiplier:  100000000, color: 'Gray'   , hex: '#9e9e9e', ppm: 1    },
            { value: 9,    tolerance: null, multiplier: 1000000000, color: 'White'  , hex: '#fafafa', ppm: null },
            { value: null, tolerance: 5,    multiplier:        0.1, color: 'Gold'   , hex: '#fdd835', ppm: null },
            { value: null, tolerance: 10,   multiplier:       0.01, color: 'Silver' , hex: '#b0bec5', ppm: null },
        ]
    },

    methods: {
        /**
         * Setup initial field values.
         */
        init: function() {
            this.selectedColors.band1 = this.getValueColors(true)[0].color;
            this.selectedColors.band2 = this.getValueColors()[0].color;
            this.selectedColors.band3 = this.getValueColors()[0].color;
            this.selectedColors.band4 = this.getValueColors()[0].color;
            this.selectedColors.band5 = this.getToleranceColors()[0].color;
            this.selectedColors.band6 = this.getPPMColors()[0].color;

            this.computeResistorValue();
        },

        /**
         * Gets the band color object by color name.
         * @param {string} name - The name of the color to find.
         */
        getColorByName: function (name) {
            var color = null;
            this.bandColors.forEach(x => {
                if (x.color == name)
                    color = x;
            });
            return color;
        },

        /**
         * Gets color from band color collection depending on certain criteria.
         * @param {function} comparator - the criteria/condition for selecting color band.
         */
        getColors: function(comparator) {
            var valueColors = [];
            this.bandColors.forEach(x => {
                if (comparator(x))
                    valueColors.push(x);
            });
            return valueColors;
        },

        /**
         * Get band color for value selection.
         * @param {bool} excludeBlack - Determines if black is excluded from list (for 1st band, 4 bands setting).
         */
        getValueColors: function (excludeBlack = false) {
            return this.getColors(x => x.value != null && !(excludeBlack && x.value == 0));
        },

        /**
         * Get band color for tolerance selection.
         */
        getToleranceColors: function () {
            return this.getColors(x => x.tolerance != null);
        },

        /**
         * Gets band colors with PPM.
         */
        getPPMColors: function () {
            return this.getColors(x => x.ppm != null);
        },

        /**
         * Compute for the resistor value based on selected color bands.
         */
        computeResistorValue: function () {
            this.resetFirstBandOnFourBands(); // Make sure black (1st band) isn't selected on 4-band mode.

            var value1 = this.getColorByName(this.selectedColors.band1).value;
            var value2 = this.getColorByName(this.selectedColors.band2).value;
            var value3 = this.getColorByName(this.selectedColors.band3).value;
            var multiplier = this.getColorByName(this.selectedColors.band4).multiplier;
            var tolerance = this.getColorByName(this.selectedColors.band5).tolerance;
            var tempco = this.getColorByName(this.selectedColors.band6).ppm;

            // Compute resistance value.
            switch(this.bandCount) {
                case 0: // 3-band
                    tolerance = 20; // Fixed 20% tolerance on 3-band mode.
                case 1: // 4-band
                    this.resistorResistanceValue = ((value1 * 10) + (value2 * 1)) * multiplier;
                    break;
                case 2: // 5-band
                case 3: // 6-band
                    this.resistorResistanceValue = ((value1 * 100) + (value2 * 10) + (value3 * 1)) * multiplier;
                    break;
            }

            // Generate output string.
            var output = [this.formatValue(this.resistorResistanceValue), this.formatTolerance(tolerance)];

            // Output PPM on band count 2 (6-band)
            if (this.bandCount == 3) {
                output.push(this.formatPPM(tempco));
            }

            this.resistorValueText =  output.join(' ');
        },

        /**
         * If current band count is 4, reset to brown if selected color for band 1 is black.
         */
        resetFirstBandOnFourBands: function () {
            if (this.bandCount != 0 && this.bandCount != 1) {
                return;
            }
            if (this.selectedColors.band1 == "Black") {
                this.selectedColors.band1 = "Brown";
            }
        },

        /**
         * Formats the PPM value (tempco).
         * @param {int} ppmValue - The PPM value to format.
         */
        formatPPM: function (ppmValue) {
            return ppmValue + 'ppm/K';
        },

        /**
         * Formats the tolerance value.
         * @param {int} toleranceValue - The tolerance value to format.
         */
        formatTolerance: function (toleranceValue) {
            return "±" + toleranceValue + "%";
        },

        /**
         * Formats value into a human-readable form (1000 = 1k, 23,000,000 = 23M, etc.)
         * @param {int} value - The reistance value to format.
         */
        formatValue: function (value) {
            var suffix = "";
            var nvalue = value;

            if (value >= 1000000000) {
                nvalue = value / 1000000000;
                suffix = "G";
            } else if (value >= 1000000) {
                nvalue = value / 1000000;
                suffix = "M";
            } else if (value >= 1000) {
                nvalue = value / 1000;
                suffix = "k";
            }

            return this.toFixed(nvalue, 2) + suffix + " Ω";
        },

        /**
         * Trim number to specified fixed decimal digits.
         * @param {int} num - The number to trim.
         * @param {int} fixed - The number of fixed decimal places.
         */
        toFixed: function (num, fixed) {
            var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
            return num.toString().match(re)[0];
        }
    },

    /**
     * Before Vue mount lifecycle event hook.
     */
    beforeMount: function() {
        this.init();
    }
});