import { Decoration, WidgetType, ViewPlugin } from '@codemirror/view';
import { RangeSetBuilder } from '@codemirror/state';

export default (context) => {
    return {
        plugin: async (codeMirrorWrapper) => {
            // Defines a CodeMirror view plugin that updates decorations on relevant changes
            const PINPlugin = ViewPlugin.fromClass(
                class {
                    constructor(view) {
                        this.userValidated = false;
                        this.decorations = applyDecorations(view, this);
                    }
                    update(update) {
                        if (update.docChanged || update.viewportChanged || update.selectionSet) {
                            this.decorations = applyDecorations(update.view, this);
                        }
                    }
                },
                {
                    decorations: v => v.decorations
                }
            );

            function applyDecorations(view, plugin) {
                const builder = new RangeSetBuilder();
                if (plugin.userValidated) {
                    return builder.finish()
                }
                builder.add(
                    0,
                    0,
                    Decoration.widget({
                        widget: new PINOverlayWidget(view, plugin),
                                        side: -1, // Make sure it comes before content
                    })
                );
                return builder.finish();
            }

            function validatePIN(pin, view, plugin) {
                console.error('PIN attempt:', pin);
                if (pin === '1234') { // Same as my luggage
                    console.error('Successfully validated!');
                    plugin.userValidated = true;
                    plugin.decorations = applyDecorations(view, plugin);
                    view.dispatch({ effects: [] });
                } else {
                    // wrong PIN
                }
            }

            class PINOverlayWidget extends WidgetType {
                constructor(view, plugin) {
                    super();
                    this.view = view;
                    this.plugin = plugin;
                }

                toDOM() {
                    const overlay = document.createElement('div');
                    overlay.style.position = 'absolute';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.background = 'white';
                    overlay.style.zIndex = '1000';
                    overlay.style.display = 'flex';
                    overlay.style.flexDirection = 'column';
                    overlay.style.alignItems = 'center';
                    overlay.style.justifyContent = 'center';
                    overlay.style.fontSize = '1.5em';
                    overlay.style.gap = '1em';

                    const title = document.createElement('div');
                    title.textContent = '🔒 Enter PIN to unlock';

                    const input = document.createElement('input');
                    input.type = 'password';
                    input.placeholder = 'PIN';
                    input.style.fontSize = '1em';
                    input.style.padding = '0.5em';

                    const button = document.createElement('button');
                    button.textContent = 'Unlock';
                    button.style.fontSize = '1em';
                    button.style.padding = '0.5em 1em';

                    button.onclick = () => {
                        const pin = input.value;
                        input.value = '';
                        validatePIN(pin, this.view, this.plugin);
                    };

                    overlay.appendChild(title);
                    overlay.appendChild(input);
                    overlay.appendChild(button);

                    return overlay;
                }

                ignoreEvent() {
                    return true;
                }
            }
            // Add the extension
            codeMirrorWrapper.addExtension(PINPlugin);
        }
    };
};