namespace SmartBusiness.Web.Components {
    export class SVGLayoutDesigner extends Components.ComponentBase {

        public constructor(componentInfo: KnockoutComponentTypes.ComponentInfo, params: any) {
            super(componentInfo, params);
            setTimeout(() => (window as any).SVGLayoutDesigner.Render(this.$component[0]));
            this.InitEventsListener();
        }

        public GetEditorComponent() {
            return this.$component[0].querySelector('.Editor');
        }

        public GetCurrentHistoryState() {
            this.GetEditorComponent().dispatchEvent(new CustomEvent('getCurrentHistoryState'));
        }

        public GetEditorState() {
            this.GetEditorComponent().dispatchEvent(new CustomEvent('getEditorState'));
        }

        public SetEditorState(editorState: IEditorState) {
           this.GetEditorComponent().dispatchEvent(new CustomEvent('SetEditorState', { detail: editorState }));
        }

        public AppendNewHistoryState(historyState: IHistoryState) {
            this.GetEditorComponent().dispatchEvent(new CustomEvent('appendNewState', { detail: historyState }));
        }

        public OHistoryState: KnockoutObservable<any>;

        private InitEventsListener() {
            this.$component[0].addEventListener('getCurrentHistoryState', (e: CustomEvent) => {
                this.OHistoryState(e.detail);
                console.log(this.OHistoryState());
            });
            this.$component[0].addEventListener('getEditorState', (e) => console.log((e as any).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' }
    });
}