/**
 * Copyright (C) 2024 Puter Technologies Inc.
 *
 * This file is part of Puter.
 *
 * Puter is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program 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 Affero General Public License for more details.
 * 
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import UIWindow from './UIWindow.js'

async function UIWindowColorPicker(options){
    // set sensible defaults
    if(arguments.length > 0){
        // if first argument is a string, then assume it is the default color
        if(isString(arguments[0])){
            options = {};
            options.default = arguments[0];
        }
    }
    options = options ?? {};

    return new Promise(async (resolve) => {
        let colorPicker;

        let h = ``;
        h += `<div>`;
            h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
                    // picker
                    h += `<div style="padding: 0; margin-bottom: 20px;">`;
                        h += `<div class="picker"></div>`;
                    h += `</div>`;

                    // Select button
                    h += `<button class="select-btn button button-primary button-block button-normal">Select</button>`
                h += `</form>`;
            h += `</div>`;
        h += `</div>`;
        
        const el_window = await UIWindow({
            title: 'Select color…',
            app: 'color-picker',
            single_instance: true,
            icon: null,
            uid: null,
            is_dir: false,
            body_content: h,
            has_head: true,
            selectable_body: false,
            draggable_body: false,
            allow_context_menu: false,
            is_draggable: true,
            is_droppable: false,
            is_resizable: false,
            stay_on_top: false,
            allow_native_ctxmenu: true,
            allow_user_select: true,
            ...options.window_options,
            width: 350,
            dominant: true,
            on_close: async ()=>{
                resolve(false)
            },
            onAppend: function(window){
                colorPicker = new iro.ColorPicker($(window).find('.picker').get(0), {
                    layout: [
                        {
                            component: iro.ui.Box,
                            options: {
                                layoutDirection: 'horizontal',
                                width: 265,
                                height: 265,
                            }
                        },
                        {
                            component: iro.ui.Slider,
                            options: {
                                sliderType: 'alpha',
                                layoutDirection: 'horizontal',
                                height: 265,
                                width:265,
                            }
                        },
                        {
                            component: iro.ui.Slider,
                            options: {
                                sliderType: 'hue',
                            }
                        },
                    ],
                    // Set the initial color to pure red
                    color: options.default ?? "#f00",
                });    
            },
            window_class: 'window-login',
            window_css:{
                height: 'initial',
            },
            body_css: {
                width: 'initial',
                padding: '0',
                'background-color': 'rgba(231, 238, 245, .95)',
                'backdrop-filter': 'blur(3px)',
            }    
        })

        $(el_window).find('.select-btn').on('click', function(e){            
            resolve({color: colorPicker.color.hex8String});
            $(el_window).close();
        })  
        $(el_window).find('.font-selector').on('click', function(e){
            $(el_window).find('.font-selector').removeClass('font-selector-active');
            $(this).addClass('font-selector-active');
        }) 
    }) 
}

export default UIWindowColorPicker