import { defineComponent } from 'vue'
import { routes } from './router'
import { useRoute, useRouter } from 'vue-router'

const Header = defineComponent({
  setup() {
    const router = useRouter()
    const route = useRoute()
    const onChange = async (event: any) => {
      await router.push(event.target.value)
    }

    return () => (
      <header>
        <a class="logo" href="https://github.com/bcakmakoglu/revue-flow">
          Revue Flow Dev
        </a>
        <select v-model={route.path} onChange={onChange}>
          {routes.map((route) =>
            route.path !== '/' ? (
              <option value={route.path} key={route.path}>
                {route.path.substr(1, route.path.length)}
              </option>
            ) : null
          )}
        </select>
      </header>
    )
  }
})

export default Header