<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

import { findWorkspace, workspaces } from "../workspaceRegistry";
import TradingDateControl from "./TradingDateControl.vue";

const route = useRoute();
const router = useRouter();
const current = computed(() => String(route.params.workspace ?? ""));
const marketWorkspaces = workspaces.filter((item) => item.group === "市场复盘");
const visible = computed(() => findWorkspace(current.value)?.group === "市场复盘");

function change(event: Event): void {
  void router.push(`/workspace/${(event.target as HTMLSelectElement).value}`);
}
</script>

<template>
  <div class="mobile-context-bar">
    <label v-if="visible" class="mobile-workspace-switch">
      <span>行情页面</span>
      <select :value="current" aria-label="切换行情页面" @change="change">
        <option v-for="workspace in marketWorkspaces" :key="workspace.key" :value="workspace.key">
          {{ workspace.title }} · {{ workspace.description }}
        </option>
      </select>
    </label>
    <TradingDateControl class="mobile-date-control" />
  </div>
</template>
