<script lang='js'>
    import {createElement, ref} from '@vue/composition-api';

    export default {
        name: 'App',
        setup() {

            const tabs = ['Home', 'Posts', 'Archive'];

            const currentTab = ref('Home');

            return () => {

                const buttons = tabs.map((tab) => {
                    return createElement('button', {
                        key: tab,
                        class: ['tab-button', {active: currentTab.value === tab}],
                        on: {
                            click: () => currentTab.value = tab
                        }
                    }, tab)
                });

                const component = () => {
                    if (currentTab.value === 'Home') {
                        return createElement(InputComponent, {
                            props: {
                                label: "Home"
                            }
                        })
                    }
                    if (currentTab.value === 'Posts') {
                        return createElement(InputComponent, {
                            props: {
                                label: "Posts"
                            }
                        })
                    }
                    if (currentTab.value === 'Archive') {
                        return createElement(InputComponent, {
                            props: {
                                label: "Archive"
                            }
                        })
                    }
                };

                return createElement('div', null, [
                    ...buttons,
                    component()
                ])
            }
        }
    }

    const InputComponent = {
        name: 'InputComponent',

        props: {
            label: {
                type: String,
                required: true
            }
        },

        setup(props) {

            const state = ref("");

            return () => {

                console.log(props.label)

                return createElement("div", [

                    createElement("label", null, props.label),

                    createElement("input", {
                        domProps: {
                            value: state.value
                        },
                        on: {
                            input: function (event) {
                                state.value = event.target.value
                            }
                        }
                    })
                ])
            }
        }
    };

</script>