import { render } from '@wordpress/element';
import Dashboard from './components/Dashboard';
import './components/GeneralSettings';
import './components/LoginLogoutSettings';
import './components/FileDirectoryProtectionSettings';
import '../css/dashboard.css';

const settings = window.ironSecuritySettings || {};

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('iron-security-dashboard');
    if (container) {
        // Get any data attributes passed from PHP
        const dashboardData = container.dataset.settings ? JSON.parse(container.dataset.settings) : {};

        // Merge with window settings
        const mergedSettings = {
            ...settings,
            ...dashboardData,
            onSettingChange: (section, setting, value) => {
            }
        };

        render(<Dashboard settings={mergedSettings} />, container);
    }
});

const saveSettings = (section, setting, value) => {
    const data = new FormData();
    data.append('action', 'iron_security_save_setting');
    data.append('section', section);
    data.append('setting', setting);
    data.append('value', value);
    data.append('nonce', settings.nonce);

    fetch(settings.ajaxurl, {
        method: 'POST',
        credentials: 'same-origin',
        body: data
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message or update UI
            console.log('Setting saved successfully');
        } else {
            // Show error message
            console.error('Failed to save setting:', data.message);
        }
    })
    .catch(error => {
        console.error('Error saving setting:', error);
    });
}; 