document.addEventListener("DOMContentLoaded", () => {

    if( !document.querySelector('.input-color') ) return
    const params = new URLSearchParams(window.location.search);
    const currentPrimary = getComputedStyle(document.documentElement).getPropertyValue('--color-primary')
    const defaultPrimary = params.has('p') ? "#" + params.get('p') : currentPrimary ? currentPrimary.trim() : "#FF0055";
    document.documentElement.style.setProperty('--color-primary', defaultPrimary);
    const cP = Pickr.create({
        el: '.input-color#color-primary',
        theme: 'nano',
        default: defaultPrimary,
        defaultRepresentation: 'HEX',
        swatches: null,
        components: {
            hue: true,
            preview: true,
            palette: true,
            interaction: {
                input: true
            }
        }
    });
    cP.on('change', (color, evt) => {
        document.documentElement.style.setProperty('--color-primary', color.toHEXA());
        params.set('p', String(color.toHEXA()).substr(1));
        cP.applyColor();
    });
    const currentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-secondary')
    const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#314560";
    document.documentElement.style.setProperty('--color-secondary', defaultSecondary);
    const cS = Pickr.create({
        el: '.input-color#color-secondary',
        theme: 'nano',
        default: defaultSecondary,
        defaultRepresentation: 'HEX',
        swatches: null,
        components: {
            hue: true,
            preview: true,
            palette: true,
            interaction: {
                input: true
            }
        }
    });
    cS.on('change', (color, evt) => {
        document.documentElement.style.setProperty('--color-secondary', color.toHEXA());
        params.set('s', String(color.toHEXA()).substr(1));
        cS.applyColor();
    });
    const currentComplementary = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary')
    const defaultComplementary = params.has('c') ? "#" + params.get('c') : currentComplementary ? currentComplementary.trim() : "#00E3B4";
    document.documentElement.style.setProperty('--color-complementary', defaultComplementary);
    const cC = Pickr.create({
        el: '.input-color#color-complementary',
        theme: 'nano',
        default: defaultComplementary,
        defaultRepresentation: 'HEX',
        swatches: null,
        components: {
            hue: true,
            preview: true,
            palette: true,
            interaction: {
                input: true
            }
        }
    });
    cC.on('change', (color, evt) => {
        document.documentElement.style.setProperty('--color-complementary', color.toHEXA());
        params.set('c', String(color.toHEXA()).substr(1));
        cC.applyColor();
    });
    const currentComplementaryDarken = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary-darken')
    const defaultComplementaryDarken = params.has('cd') ? "#" + params.get('cd') : currentComplementaryDarken ? currentComplementaryDarken.trim() : "#0068FF";
    document.documentElement.style.setProperty('--color-complementary-darken', defaultComplementaryDarken);
    const cCd = Pickr.create({
        el: '.input-color#color-complementary-darken',
        theme: 'nano',
        default: defaultComplementaryDarken,
        defaultRepresentation: 'HEX',
        swatches: null,
        components: {
            hue: true,
            preview: true,
            palette: true,
            interaction: {
                input: true
            }
        }
    });
    cCd.on('change', (color, evt) => {
        document.documentElement.style.setProperty('--color-complementary-darken', color.toHEXA());
        params.set('cd', String(color.toHEXA()).substr(1));
        cCd.applyColor();
    });
});