/**
 * Theme: Konrix - Responsive Tailwind Admin Dashboard
 * Author: Coderthemes
 * Module/App: form-advanced.init.js
 */

import Pickr from '@simonwep/pickr'

class AdvancedForm {

    constructor() {
        this.body = document.getElementsByTagName("body")[0];
        this.window = window;
    }


    // colorpickers
    initcolorpickers() {
        const self = this;
        // classic color picker
        var classicPickrDemo = document.querySelectorAll(".classic-colorpicker");
        if (classicPickrDemo)
            classicPickrDemo.forEach(function () {
                Pickr.create({
                    el: ".classic-colorpicker",
                    theme: "classic", // or 'monolith', or 'nano'
                    default: "#405189",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                        "rgba(0, 188, 212, 0.7)",
                        "rgba(0, 150, 136, 0.75)",
                        "rgba(76, 175, 80, 0.8)",
                        "rgba(139, 195, 74, 0.85)",
                        "rgba(205, 220, 57, 0.9)",
                        "rgba(255, 235, 59, 0.95)",
                        "rgba(255, 193, 7, 1)",
                    ],

                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            hex: true,
                            rgba: true,
                            hsva: true,
                            input: true,
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // monolith color picker
        var monolithColorPickr = document.querySelectorAll(".monolith-colorpicker");
        if (monolithColorPickr)
            monolithColorPickr.forEach(function () {
                Pickr.create({
                    el: ".monolith-colorpicker",
                    theme: "monolith",
                    default: "#0ab39c",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                    ],
                    defaultRepresentation: "HEXA",
                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            hex: false,
                            rgba: false,
                            hsva: false,
                            input: true,
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // nano color picker
        var nanoColorPickr = document.querySelectorAll(".nano-colorpicker");
        if (nanoColorPickr)
            nanoColorPickr.forEach(function () {
                Pickr.create({
                    el: ".nano-colorpicker",
                    theme: "nano",
                    default: "#3577f1",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                    ],
                    defaultRepresentation: "HEXA",
                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            hex: false,
                            rgba: false,
                            hsva: false,
                            input: true,
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // demo color picker
        var demoColorPickr = document.querySelectorAll(".colorpicker-demo");
        if (demoColorPickr)
            demoColorPickr.forEach(function () {
                Pickr.create({
                    el: ".colorpicker-demo",
                    theme: "monolith",
                    default: "#405189",
                    components: {
                        // Main components
                        preview: true,
                        // Input / output Options
                        interaction: {
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // color picker opacity & hue
        var opacityHueColorPickr = document.querySelectorAll(".colorpicker-opacity-hue");
        if (opacityHueColorPickr)
            opacityHueColorPickr.forEach(function () {
                Pickr.create({
                    el: ".colorpicker-opacity-hue",
                    theme: "monolith",
                    default: "#0ab39c",

                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // color picker switch
        var swatcherColorPickr = document.querySelectorAll(".colorpicker-switch");
        if (swatcherColorPickr)
            swatcherColorPickr.forEach(function () {
                Pickr.create({
                    el: ".colorpicker-switch",
                    theme: "monolith",
                    default: "#3577f1",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                    ],
                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // color picker input
        var inputColorPickr = document.querySelectorAll(".colorpicker-input");
        if (inputColorPickr)
            inputColorPickr.forEach(function () {
                Pickr.create({
                    el: ".colorpicker-input",
                    theme: "monolith",
                    default: "#f7b84b",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                    ],
                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            input: true,
                            clear: true,
                            save: true,
                        },
                    },
                });
            });

        // color picker Format
        var formatColorPickr = document.querySelectorAll(".colorpicker-format");
        if (formatColorPickr)
            formatColorPickr.forEach(function () {
                Pickr.create({
                    el: ".colorpicker-format",
                    theme: "monolith",
                    default: "#f06548",
                    swatches: [
                        "rgba(244, 67, 54, 1)",
                        "rgba(233, 30, 99, 0.95)",
                        "rgba(156, 39, 176, 0.9)",
                        "rgba(103, 58, 183, 0.85)",
                        "rgba(63, 81, 181, 0.8)",
                        "rgba(33, 150, 243, 0.75)",
                        "rgba(3, 169, 244, 0.7)",
                    ],
                    components: {
                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            hex: true,
                            rgba: true,
                            hsva: true,
                            input: true,
                            clear: true,
                            save: true,
                        },
                    },
                });
            });
    }

    init() {
        this.initcolorpickers();
    }

}
new AdvancedForm().init();