# Test to show issue with event node when one change handler is used for multiple input elements

import logging

import panel as pn

pn.extension()

logger = logging.getLogger(__name__)
console_handler = logging.StreamHandler()
logging.basicConfig(handlers=[console_handler],
                    level=logging.DEBUG,
                    format='%(levelname)s %(message)s',
                    force=True)


class UserInput(pn.reactive.ReactiveHTML):
    first_name = ''
    family_name = ''

    _template = """
                   <div>First name <input type="text" id="first_name" onchange="${_onChange}"/></div>
                   <div>Family name<input type="text" id="family_name" onchange="${_onChange}"/></div>
                """

    def _onChange(self, event):
        logger.info(f'Event data: {event.data}')
        logger.info(f'Event node: {event.node}')

        user_input = event.data['target']['value']
        if event.node == 'first_name':
            self.first_name = user_input
        elif event.node == 'family_name':
            self.family_name = user_input
        else:
            raise RuntimeError(f'Unknown node: {event.node}')


def main() -> pn.template.BootstrapTemplate:
    template = pn.template.BootstrapTemplate(title='Test html pane user input retrieval')

    user_input = UserInput()
    template.main.append(user_input)

    return template


main().servable()