import { preferences, defaultPreferences, preferencesSchema } from "@/utils/storage";
import data from "@/public/json/preferences.json";
let values: preferencesSchema;

type Tags = "utility" | "social" | "economy" | "development" | "customization";

type SettingData = {
    name: string,
    desc: string,
    setting: string,
    notes: Array<string>,
    config?: Array<{
        type: "select" | "check",
        subsetting: string,
        label?: string,
        values?: Record<string, any>
    }>,
    tags: Array<Tags>
};

export default defineUnlistedScript(() => {
    console.log('Static Settings Data:' , data);
    const saveBtn = document.getElementById('save')!;

    preferences.getValue()
        .then(async (preferenceValues) => {
            values = preferenceValues;

            for (const _ of data as SettingData[]) {
                const container = await createContainer(_);

                container.getElementsByClassName('toggle-btn')[0].addEventListener('click', async () => {
                    saveBtn.removeAttribute('disabled');

                    const state = !values[_.setting].enabled;
                    values[_.setting].enabled = state;
                    updateState(container, state);
                });
            };
        });

    saveBtn.addEventListener('click', async () => {
        saveBtn.setAttribute('disabled', 'true');
        preferences.setValue(values);
    });
});

async function createContainer(data: SettingData): Promise<HTMLDivElement> {
    const noteClasses = {
        "?": "note",
        "!": "warning",
        "-": "secondary"
    };

    const state = await getState(data.setting);
    const container = document.createElement('div');

    container.classList.add('setting-container');
    container.classList.add(state ? 'enabled' : 'disabled');

    container.innerHTML = `
    <span class="indicator">&nbsp;</span>
    <span class="title">
        ${data.name}
    </span>
    <div class="setting-buttons">
        <button class="btn btn-sm toggle-btn ${ state ? 'btn-danger' : 'btn-success' }">Toggle</button>
    </div>
    <br />
    <span class="desc">${data.desc}</span>
    ${(data.notes || []).map((note) => {
        const noteType = note.charAt(0) as keyof typeof noteClasses;
        return `<span class="${ noteClasses[noteType] }">* ${ note.slice(1) }</span>`;
    }).join('')}
    `;

    document.getElementById('settings')!.appendChild(container);
    if (data.config) createConfig(container, data);
    return container;
}

function createConfig(div: HTMLDivElement, data: SettingData) {
    for (const subsetting of data.config!) {
        if (subsetting.type === 'select') {
            const select = document.createElement('select');
            select.classList.add('form-select', 'form-select-sm', 'mb-2');
            select.setAttribute('style', 'width: 350px;');

            for (const [key, value] of Object.entries(subsetting.values!)) {
                const option = document.createElement('option');
                option.value = key;
                option.innerText = value;
                select.appendChild(option);
            };

            div.appendChild(select);
        } else if (subsetting.type === 'check') {
            const check = document.createElement('span');

            check.classList.add('form-check', 'form-switch');
            check.innerHTML = `
            <input class="form-check-input" type="checkbox" role="switch" id="${subsetting.subsetting}" />
            <label class="form-check-label" for="${subsetting.subsetting}">
                ${subsetting.label}
            </label>
            `;

            check.getElementsByClassName('form-check-input')[0].addEventListener('change', () => {
                document.getElementById('save')!.removeAttribute('disabled');

                const state = !values[data.setting][subsetting.subsetting];
                values[data.setting][subsetting.subsetting] = state;
            });

            div.appendChild(check);
        }
    }
}

function updateState(div: HTMLDivElement, state: boolean) {
    const toggleBtn = div.getElementsByClassName('toggle-btn')[0];

    div.classList.toggle('enabled', state);
    div.classList.toggle('disabled', !state);

    toggleBtn.classList.toggle('btn-success', !state);
    toggleBtn.classList.toggle('btn-danger', state);
}

async function getState(name: string): Promise<boolean | null> {
    const state = values[name] ?? (defaultPreferences as preferencesSchema)[name];
    if (!state) return null;
    return state.enabled;
}