<script lang='ts' setup>
import type { PropType } from "vue";
import type { TradeWayConfig } from "../config";
import type { SpotOrderBody } from "@/api/types";
import { modalController } from "@ionic/vue";
import { caretDownOutline } from "ionicons/icons";
import { tradeWayConfig } from "../config";

const model = defineModel({ type: Object as PropType<SpotOrderBody>, required: true });
const { t } = useI18n();
const currentTradeWay = computed(() => {
  return tradeWayConfig.find(item => item.value === model.value.orderType);
});

function onSelectTradeWay(item: TradeWayConfig) {
  model.value.orderType = item.value;
  model.value.price = "";
  modalController.dismiss();
}
</script>

<template>
  <div id="open-modal" class="bg-faint flex items-center justify-between px-4 py-2 rounded-md">
    <div class="text-xs font-medium text-text-300">
      {{ currentTradeWay?.name }}
    </div>
    <ion-icon :icon="caretDownOutline" />
  </div>

  <ion-modal trigger="open-modal" :breakpoints="[0, 0.8]" :initial-breakpoint="0.8" handle>
    <div class="ion-padding">
      <div class="text-xs pb-3 text-text-300">
        {{ t('trade.orderType.baseOrder') }}
      </div>
      <div class="flex flex-col gap-4">
        <div v-for="(item, index) in tradeWayConfig" :key="index" class="flex items-center" @click="onSelectTradeWay(item)">
          <div class="flex items-center flex-1">
            <Icon :icon="item.icon" class="text-2xl mr-4" />
            <div class="flex flex-col gap-1">
              <div class="text-base font-semibold">
                {{ t(`trade.orderType.${item.value}`) }}
              </div>
              <div class="text-xs text-text-500">
                {{ t(`trade.orderType.${item.value}Desc`) }}
              </div>
            </div>
          </div>
          <div v-show="model.orderType === item.value" class="text-primary">
            <Icon icon="ic:sharp-check-circle" class="text-2xl" />
          </div>
        </div>

        <ui-divider />

        <div class="flex items-center">
          <Icon icon="ic:twotone-more-horiz" class="text-2xl mr-4" />
          <div class="flex flex-col gap-1">
            <div class="text-sm text-text-200">
              {{ t('trade.orderType.moreTypes') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-modal>
</template>

<style lang='css' scoped>
ion-input.count {
  --background: var(--ion-color-faint);
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 6px;
  font-size: 12px;
  min-height: 40px;
}
</style>
