import {useState, createContext, useEffect, useRef} from "@wordpress/element";
import apiFetch from '@wordpress/api-fetch';

export const PanelContext = createContext();

function PanelContextProvider(props) {
    const defaultSettings = {
        //homepage_display: devia_options.homepage_display,
        //home_id: devia_options.home_id,
        site_icon: '',
        brand_color: '#4D34FA',
        style: 'blue',
    };

    const [settingsSaved, setSettingsSaved] = useState(false);
    const [settings, setSettings] = useState(defaultSettings);
    const [activeItem, setActiveItem] = useState({activeItem: "/"});
    const [currentStep, setCurrentStep] = useState(0);
    const [selectedPages, setSelectedPages] = useState([]);
    const pageStart = useRef(null);
    const getSettings = () => {
        apiFetch({path: '/devia/v1/settings'}).then((options) => {
            setSettings(options);
        });
    }

    const saveSettings = () => {
        apiFetch({
            path: '/devia/v1/settings',
            method: 'POST',
            data: settings,
        });
    }

    const resetSettings = () => {
        setSettings(defaultSettings);

        apiFetch({
            path: '/devia/v1/settings',
            method: 'POST',
            data: defaultSettings,
        });
    }

    const importSettings = (newSettings) => {
        setSettings(newSettings);

        apiFetch({
            path: '/devia/v1/settings',
            method: 'POST',
            data: newSettings,
        });
    }

    const updateSetting = (key, value) => {
        setSettings({...settings, [key]: value});
    };

    useEffect(() => {
        getSettings();
    }, []);


    return (
        <PanelContext.Provider
            value={{
                settings,
                settingsSaved,
                setSettingsSaved,
                updateSetting,
                setSettings,
                saveSettings,
                resetSettings,
                importSettings,
                activeItem,
                setActiveItem,
                currentStep,
                setCurrentStep,
                selectedPages,
                setSelectedPages,
                pageStart
            }}
        >
            {props.children}
        </PanelContext.Provider>
    );
}

export default PanelContextProvider;