new Vue({
    el: '#app',
    
    data: {
        input: '<linearGradient xmlns="http://www.w3.org/2000/svg" gradientUnits="userSpaceOnUse" x1="17.5001" y1="32" x2="17.5001" y2="2.9711"><stop offset="0" style="stop-color:#FCB3A4"/><stop offset="1" style="stop-color:#DA5899"/></linearGradient>'
    },
    
    computed: {
        output() {
            return parseInput(this.input)
                .map(gradient => {
                    if (defined(gradient.angle) && gradient.stops.length > 0) {
                        const angle = round(Number(gradient.angle));
                        return `linear-gradient(${angle}deg, ${
                            gradient.stops
                                .map(stop => `${stop.color} ${stop.offset}%`)
                                .join(', ')
                        })`;
                    }
                
                    return undefined;
                })
                .filter(gradient => defined(gradient))
                .join(',\r\n');
        },
        
        style() {
            return this.output && this.output.trim().length > 0
                ?  { 'background-image': this.output }
                : undefined;
        },
        
        cssOutput() {
            return this.style 
                ? `.gradient {\r\n    background-image: ${this.style['background-image']};\r\n}`
                : '';
        }
    }
});

function parseInput(input) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(input, 'image/svg+xml');
    
    return Array.from(doc.querySelectorAll('linearGradient'))
        .map(lg => {
            const angle = getGradientAngle(lg);
            const stops = getGradientStops(lg);
        
            return {
                angle,
                stops: stops.filter(s => { return defined(s) && defined(s.offset) && defined(s.color); })
            };
        });
}


function getGradientAngle(lg) {
    let x1Attr = removeUnit((lg.getAttribute('x1') || '').trim());
    let x2Attr = removeUnit((lg.getAttribute('x2') || '').trim());
    let y1Attr = removeUnit((lg.getAttribute('y1') || '').trim());
    let y2Attr = removeUnit((lg.getAttribute('y2') || '').trim());
    
    // Defaults: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
    // thanks @nVitius :)
    const x1 = toNumber(x1Attr, 0);
    const x2 = toNumber(x2Attr, 100);
    const y1 = toNumber(y1Attr, 0);
    const y2 = toNumber(y2Attr, 0);
        
    const x = x2 - x1;
    const y = y2 - y1;
    
    // Use 90deg for gradients only in the x-direction
    if (y === 0) {
        return 90;
    }
    
    const angleRad = Math.atan(y/x);
    
    return angleRad * 180 / Math.PI;
}

function removeUnit(value) {
    if (value.includes('%')) {
        return value.replace(/%/g, '');
    }
    
    return value;
}

function toNumber(value, defaultValue) {
    const n = Number(value);
    return Number.isNaN(n) ? defaultValue : n;
}

function getGradientStops(lg) {
    return Array.from(lg.querySelectorAll('stop'))
        .map(stop => {
            let offset = stop.getAttribute('offset');
        
            if (offset === null) {
                return undefined;
            }
        
            offset = offset.trim()
        
            if (offset.endsWith('%')) {
                offset = offset.replace('%', '');
            } else {
                // Assume 0-1 as percentage when offset has no %
                offset = Number(offset) * 100;
            }
        
            let color;
            let opacity;

            // Try to find the color using `stop-color` and `stop-opacity`
            if (stop.hasAttribute('stop-color')) {
                color = stop.getAttribute('stop-color');
                opacity = stop.getAttribute('stop-opacity');

                if (opacity) {
                    const rgb = hexToRgb(color);

                    if (rgb) {
                        const { r, g, b } = rgb;
                        color = `rgba(${r}, ${g}, ${b}, ${opacity})`;
                    }
                }
            }
        
            // Try to find the color using `style`
            if (!color && stop.hasAttribute('style')) {
                const styles = getStyles(stop.getAttribute('style'));
                color = styles['stop-color'];
            }
                
            return { offset, color };
        });
}

function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : undefined;
}

function defined(value) {
    return value !== undefined;
}

function getStyles(string) {
    const el = document.createElement('div');
    
    el.setAttribute('style', string);
    
    return el.style;
}

function round(value) {
    return Math.round(value * 100) / 100;
}