{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template theme_boost_magnific/settings/theme-boost_magnific

    Example context (json):
    {
        "background": "#f0f"
    }
}}
<div class="boost_magnific-theme-select-item"
     id="{{{uniqid}}}">
    <div class="preview" style="background:{{{background}}}"></div>
</div>

{{#js}}
    require(["jquery"], function($) {
        $("#{{{uniqid}}}").click(function() {
            $("#id_s_theme_boost_magnific_background_color")
                    .val("{{{background}}}")
                    .minicolors("settings", {value: "{{{background}}}"});
            $("#header").attr("style", "background:{{{background}}}!important");

            setSubColors("{{{background}}}");
        });

        $("#id_s_theme_boost_magnific_background_color").change(function() {
            setSubColors($(this).val());
        });

        function setSubColors(color) {
            var subcolors = themeBoostMagnificGenerateColorVariations(color);

            $("#id_s_theme_boost_magnific_theme_color__color_primary")
                    .val(subcolors.color_primary)
                    .minicolors("settings", {value: subcolors.color_primary});
            $("#id_s_theme_boost_magnific_theme_color__color_secondary")
                    .val(subcolors.color_secondary)
                    .minicolors("settings", {value: subcolors.color_secondary});
            $("#id_s_theme_boost_magnific_theme_color__color_buttons")
                    .val(subcolors.color_buttons)
                    .minicolors("settings", {value: subcolors.color_buttons});
        }

        function themeBoostMagnificGenerateColorVariations(hexColor) {
            // Converte a cor hexadecimal para RGB.
            const r = parseInt(hexColor.substring(1, 3), 16);
            const g = parseInt(hexColor.substring(3, 5), 16);
            const b = parseInt(hexColor.substring(5, 7), 16);

            // Função auxiliar para garantir valores dentro do intervalo 0-255.
            const maxmin = (value) => Math.max(0, Math.min(255, value));

            // Gera variações de cor (mais clara e mais escura).
            const primary = `#${maxmin(r - 60).toString(16).padStart(2, "0")}${maxmin(g - 60).toString(16).padStart(2, "0")}${maxmin(b - 60).toString(16).padStart(2, "0")}`;
            const secondary = `#${maxmin(r + 90).toString(16).padStart(2, "0")}${maxmin(g + 90).toString(16).padStart(2, "0")}${maxmin(b + 90).toString(16).padStart(2, "0")}`;
            const buttons = `#${maxmin(r + 60).toString(16).padStart(2, "0")}${maxmin(g - 60).toString(16).padStart(2, "0")}${maxmin(b + 15).toString(16).padStart(2, "0")}`;

            // Atualiza as variáveis CSS no :root
            document.documentElement.style.setProperty("--color_primary_edit", `${maxmin(r - 60)}, ${maxmin(g - 60)}, ${maxmin(b - 60)} `);
            document.documentElement.style.setProperty("--color_secondary_edit", `${maxmin(r + 90)}, ${maxmin(g + 90)}, ${maxmin(b + 90)} `);
            document.documentElement.style.setProperty("--color_buttons_edit", `${maxmin(r + 60)}, ${maxmin(g - 60)}, ${maxmin(b + 15)} `);
            document.documentElement.style.setProperty("--background_color_edit", $("#id_s_theme_boost_magnific_background_color").val());

            return {
                color_primary: primary,
                color_secondary: secondary,
                color_buttons: buttons,
            };
        }
    });
{{/js}}
