const SettingEditor = function() {

    function setupImageInput(inputId, previewId) {
        const imageInput = document.getElementById(inputId);
        const previewImage = document.getElementById(previewId);

        if (imageInput && previewImage) {
            imageInput.onchange = () => {
                const [file] = imageInput.files;
                if (file) {
                    previewImage.src = URL.createObjectURL(file);
                }
            };
        }
    }

    function handleImagePreview() {
        // Setup for Organization Logo
        setupImageInput("SiteSetting.OrganizationLogo", "SiteSetting.OrganizationLogo.ImagePreview");

        // Setup for Favicon
        setupImageInput("SiteSetting.Favicon", "SiteSetting.Favicon.ImagePreview");

        // Setup for Welcome Image
        setupImageInput("SiteSetting.WelcomeImage", "SiteSetting.WelcomeImage.ImagePreview");
    }

    function handleButtonColor() {
        const primaryColorSetting = document.getElementById('SiteSetting.PrimaryColor');
        const textColorSetting = document.getElementById('SiteSetting.TextColor');

        if (primaryColorSetting && textColorSetting) {
            const button = createButton(primaryColorSetting.value, textColorSetting.value);

            const buttonContainer = document.createElement('div');
            buttonContainer.id = 'buttonContainer';

            const span = document.createElement('span');
            span.style.width = '350px';
            span.style.fontSize = '10pt';
            span.innerHTML = 'Colors Preview';
            span.style.display = 'inline-block';

            buttonContainer.appendChild(span);

            buttonContainer.appendChild(button);

            textColorSetting.parentNode.parentNode.insertBefore(buttonContainer, textColorSetting.parentNode.nextSibling);

            primaryColorSetting.onchange = textColorSetting.onchange = _ => {
                button.style.backgroundColor = primaryColorSetting.value;
                button.style.color = textColorSetting.value;
            }
        }

        addButtonModernStyle();
    }

    function createButton(backgroundColor, textColor) {
        const button = document.createElement('button');

        button.style.backgroundColor = backgroundColor;
        button.style.color = textColor;
        button.style.width = '308px';
        button.textContent = 'Example button';
        button.className = '__button-modern';
        button.type = 'button';

        return button;
    }

    function addButtonModernStyle() {
        let css = `.__button-modern {
        border: none;
        padding: 10px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        margin-top: 2px;
    }   .hidden {
            display: none;
        }`;

        let style = document.createElement('style');

        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }
    
    function handleUploadButton() {
        const uploadButtons = document.querySelectorAll('[data-action="upload"]');
        
        uploadButtons.forEach(button => {
            const targetInput = button.attributes['data-target'].value;
            button.addEventListener('click', (ev) => {
                ev.preventDefault();
                if (targetInput) {
                    document.getElementById(targetInput)?.click();
                }
            });
        });
    }

    return {
        handleImagePreview,
        handleButtonColor,
        handleUploadButton
    };
}

$(document).ready(() => {
    const settingEditor = new SettingEditor();
    settingEditor.handleImagePreview();
    settingEditor.handleButtonColor();
    settingEditor.handleUploadButton();
});