<app-sidebar-button>
    <button class="button m-bottom-0" type="button" onclick={ (event) => { handleClick(event) } }>
        <slot />
    </button>
    <script>

        /**
         *  button to create customEvent and dispatch to element
         *
         *  <app-sidebar-button event="" selector="" data={ }>
         *
         *  </app-sidebar-button>
         *
         *  @author Björn Hase
         *
         */

        export default {

            state: {
                element: undefined,
                data: false
            },

            /**
             *
             *
             */
            onBeforeMount() {
                if (this.root.innerHTML) {
                    this.content = this.root.innerHTML;
                    this.root.innerHTML = '';
                }

                if (!this.props.event) {
                    console.error('sidebar-button: attribute for name of custom event is missing')
                }

                if (!this.props.selector) {
                    console.error('sidebar-button: attribute for selector to send custom event is missing')
                }

                if (this.props.data) {
                    this.state.data = this.props.data
                }
            },

            /**
             *
             *
             */
            onMounted() {
                this.state.element = document.querySelector(this.props.selector)

                // adding innerHtml to button
                if (this.content) {
                    this.$('button').innerHTML = this.content;
                }
            },

            /**
             *  create custom event with props
             *
             *  @param  {[type]} event
             *  @return {[type]}
             */
            handleClick(event) {
                event.preventDefault()

                const customEvent = new CustomEvent(this.props.event, {
                    'detail': {
                        'data': this.state.data
                    }
                })

                this.state.element.dispatchEvent(customEvent)
            }

        }

    </script>
</app-sidebar-button>