<script setup lang="ts">
import { modalController } from "@ionic/vue";
import { client, safeClient } from "@/api";

const emit = defineEmits<{
  select: [symbol: string];
}>();

const [query] = useResetRef({
  offset: 0,
  limit: 200,
});
const { data } = safeClient(client.api.trading_pairs.get({ query: query.value }));
const searchText = ref("");

function handleSelect(symbol: string) {
  emit("select", symbol);
  modalController.dismiss(symbol);
}
</script>

<template>
  <ion-header class="ion-no-border">
    <ion-searchbar v-model="searchText" placeholder="搜索" class="mt-4" />
  </ion-header>

  <ion-content>
    <div class="mt-2 flex flex-col">
      <div v-for="item in data?.data" :key="item.symbol" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item.symbol)">
        <Icon icon="cryptocurrency-color:dta" class="text-3xl" />
        <div class="ml-2 inline-flex gap-2 items-baseline">
          <span class="font-medium text-md">{{ item.baseAsset }}</span><span class="text-xs text-text-400">/ {{ item.quoteAsset }}</span>
        </div>
      </div>
    </div>
  </ion-content>
</template>

<style lang="css" scoped>
@reference "tailwindcss";

ion-item.selected {
  --background: var(--ion-color-light);
}

ion-searchbar {
  --border-radius: 8px;
}
</style>
