namespace SmartBusiness.Web.Components {
    /**
     * Types macros
     */
    type IHistoryState = SVGLD.IHistoryState;
    type IEditorState = SVGLD.IEditorState;

    export class SVGLayoutDesigner extends Components.ComponentBase {

        private _hooks: Record<string, (e: CustomEvent) => void>;
        public App: AppController;
        public Editor: EditorController;

        public constructor(componentInfo: KnockoutComponentTypes.ComponentInfo, params: any) {
            super(componentInfo, params);
            this.App = new AppController(this, this.$component);
            this.Editor = new EditorController(this, this.$component);
            this._hooks = {};
        }

        /**
         * Return the root HTML component of the SmartComponent
         * In the iframe, it would be the document.
         */
        public GetRootComponent() {
            return this.$component[0]
                .querySelector('iframe')
                .contentDocument;
        }

        /**
         * Add the a new event listener that will be delete on call,
         * optionnally call a callback
         * @param callback Callback function to call in the event listener
         * @param eventType Event type for the listener to listen to
         */
        public AddEventListener(eventType: string, callback: ((...args: any[]) => void) | undefined) {
            const root = this.GetRootComponent();
            const listener = (e: CustomEvent) => {
                e.target.removeEventListener(e.type, listener);
                callback && callback(e.detail);
            };
            root.addEventListener(eventType, listener);
        }

        /// Hooks ///

        private static EDITOR_LISTENER_TYPE = 'editorListener';

        /**
         * Add a hook to the editor state change.
         * After every time an action is perform on the editor, the callback will be called
         * @param callback Callback to add that listen to the event
         */
        public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
            const root = this.GetRootComponent();
            const customEvent = (e: CustomEvent) => {
                callback(e.detail);
            }

            if (this._hooks[hookId] !== undefined) {
                console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
                return;
            }

            this._hooks[hookId] = customEvent;
            root.addEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, customEvent);
        }

        /**
         * Remove a hook to the editor state change.
         * @param callback Callback to remove that listen to the event
         */
        public RemoveEditorListenerHook(hookId): void {
            const root = this.GetRootComponent();
            root.removeEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
            delete this._hooks[hookId];
        }


        /// Macros ///

        /**
         * Reset to the first state and clear all history
         */
        public Reset(): void {
            this.Editor.GetEditorState((state) => {
                this.Editor.SetHistory([state.history[0]]);
            });
        }

        /**
         * Clear all previous history but the last state
         */
        public ClearHistory(): void {
            this.Editor.GetEditorState((state) => {
                this.Editor.SetHistory([state.history[state.history.length - 1]]);
            });
        }
    }


    class AppController {
        app: SVGLayoutDesigner;
        $component: JQuery;

        constructor(app: SVGLayoutDesigner, $component: JQuery) {
            this.app = app;
            this.$component = $component;
        }

        /**
         * Return the HTML component handling the editor
         */
        public GetAppComponent() {
            const component = this.$component[0]
                .querySelector('iframe')
                .contentDocument
                .querySelector('.App');

            if (component === undefined) {
                throw new Error('[SVGLD] Cannot hook the event because the editor is not yet open')
            }

            return component;
        }

        /// App Events ///

        /**
         * Not to be confused with setHistory,
         * change the default configuration for the new containers, symbols etc.
         * @param newEditor New editor configuration to set
         * @param callback
         */
        public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) {
            const eventType = 'setEditor';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetAppComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor }))
        }

        /**
         * Hide the main menu to go to the application.
         * SetEditor must be called first or the application will crash.
         * @param isLoaded
         * @param callback
         */
        public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
            const eventType = 'setLoaded';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetAppComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
        }
    }


    class EditorController {
        app: SVGLayoutDesigner;
        $component: JQuery;

        constructor(app: SVGLayoutDesigner, $component: JQuery) {
            this.app = app;
            this.$component = $component;
        }

        /**
         * Return the HTML component handling the editor
         */
        public GetEditorComponent() {
            const component = this.$component[0]
                .querySelector('iframe')
                .contentDocument
                .querySelector('.Editor');

            if (component === undefined) {
                throw new Error('[SVGLD] Cannot hook the event because the editor is not yet open')
            }

            return component;
        }

        /// Editor Events ///

        /**
         * Return in a callback the current state in the history of the editor
         * @param callback
         */
        public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
            const eventType = 'getCurrentHistoryState';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType));
        }

        /**
         * Return in a callback the current history of the editor
         * @param callback
         */
        public GetEditorState(callback: (state: IEditorState) => void) {
            const eventType = 'getEditorState';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType));
        }

        /**
         * Return in a callback the current history of the editor as string
         * @param callback 
         */
        public GetEditorStateAsString(callback: (state: string) => void) {
            const eventType = 'getEditorStateAsString';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType));
        }

        /**
         * Set the current history of the editor
         * @param history Whole history of the editor
         * @param callback (optional)
         */
        public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) {
            const eventType = 'setHistory';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
        }

        /**
         * Revive the references in the editor state by mutation
         * Useful after using JSON.stringify with a replacer
         * @param editorState Editor state to revive
         * @param callback Callback with the revived state
         */
        public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) {
            const eventType = 'reviveEditorState';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
        }

         /**
         * Revive the references in the history by mutation
         * Useful after using JSON.stringify with a replacer
         * @param history History to revive
         * @param callback Callback with the revived state
         */
        public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) {
            const eventType = 'reviveHistory';
            this.app.AddEventListener(eventType, callback);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
        }

        /**
         * Add a new state to the editor
         * @param historyState New history state to append
         * @param callback
         */
        public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) {
            const eventType = 'appendNewState';
            this.app.AddEventListener(eventType, callback);
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
        }

        /**
         * Create a new container at the given index position in a given parent container
         * @param index Position to insert the container
         * @param type Container type to create
         * @param parentId Parent container of the new container
         * @param callback
         */
        public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                index,
                type,
                parentId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Create a new container at the given index position in the current selected container
         * @param index Position to insert the container
         * @param type Container type to create
         * @param callback
         */
        public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addContainerToSelectedContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                index,
                type
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Append a new container in a given parent container
         * @param type Container type to create
         * @param parentId Parent container of the new container
         * @param callback
         */
        public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'appendContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                type,
                parentId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }


        /**
         * Append a new container in the current selected container
         * @param type Container type to create
         * @param callback
         */
        public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
            const eventType = 'appendContainerToSelectedContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                type
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Select a container by id
         * @param containerId Container's id to select
         * @param callback
         */
        public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'selectContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                containerId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Delete a container by id
         * @param containerId Container's id to delete
         * @param callback
         */
        public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'deleteContainer';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                containerId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }


        /**
         * Create a new symbol
         * @param name Name of the symbol present in the config
         * @param callback
         */
        public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addSymbol';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                name
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Select a symbol by id
         * @param symbolId Symbol's id to select
         * @param callback
         */
        public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'selectSymbol';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                symbolId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        /**
         * Delete a symbol by id
         * @param symbolId Symbol's id to delete
         * @param callback
         */
        public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'deleteSymbol';
            this.app.AddEventListener(eventType, callback);
            const detail = {
                symbolId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }
    }

    ko.components.register('svg-layout-designer', {
        viewModel: {
            createViewModel: function (params, componentInfo) {
                return new SmartBusiness.Web.Components.SVGLayoutDesigner(componentInfo, params);
            }
        },
        template: { element: 'svg-layout-designer' }
    });
}