<script setup lang="ts">
import { currencies, type CurrencyCode } from "@cents/domain";
import { Check, X } from "@lucide/vue";

defineProps<{
  open: boolean;
  modelValue: CurrencyCode;
}>();

const emit = defineEmits<{
  "update:modelValue": [currency: CurrencyCode];
  close: [];
}>();

const commonCurrencies: CurrencyCode[] = ["CNY", "USD", "EUR", "JPY", "THB"];
const otherCurrencies: CurrencyCode[] = ["HKD"];

function choose(currency: CurrencyCode) {
  emit("update:modelValue", currency);
  emit("close");
}
</script>

<template>
  <div v-if="open" class="currency-picker-layer">
    <button class="currency-picker-scrim" type="button" aria-label="关闭币种选择" @click="emit('close')"></button>
    <section class="currency-picker-sheet" role="dialog" aria-modal="true" aria-label="选择币种">
      <div class="currency-picker-handle"></div>
      <header>
        <div><strong>选择币种</strong><span>记账金额所使用的币种</span></div>
        <button type="button" aria-label="关闭" title="关闭" @click="emit('close')"><X :size="19" /></button>
      </header>
      <div class="currency-list">
        <button
          v-for="code in commonCurrencies"
          :key="code"
          type="button"
          :class="{ selected: modelValue === code }"
          @click="choose(code)"
        >
          <span>{{ currencies[code].symbol }}</span>
          <strong>{{ currencies[code].name }}<small>{{ code }}</small></strong>
          <Check v-if="modelValue === code" :size="19" />
        </button>
      </div>
      <p>更多币种</p>
      <div class="currency-list compact">
        <button
          v-for="code in otherCurrencies"
          :key="code"
          type="button"
          :class="{ selected: modelValue === code }"
          @click="choose(code)"
        >
          <span>{{ currencies[code].symbol }}</span>
          <strong>{{ currencies[code].name }}<small>{{ code }}</small></strong>
          <Check v-if="modelValue === code" :size="19" />
        </button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.currency-picker-layer { position:absolute; inset:0; z-index:42; }
.currency-picker-scrim { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(18,35,32,.42); backdrop-filter:blur(2px); }
.currency-picker-sheet { position:absolute; right:0; bottom:0; left:0; max-height:90%; overflow-y:auto; border-radius:14px 14px 0 0; padding:0 16px calc(16px + env(safe-area-inset-bottom)); background:#fff; color:#26342f; box-shadow:0 -16px 36px rgba(22,45,40,.2); }
.currency-picker-handle { width:38px; height:4px; margin:8px auto 3px; border-radius:2px; background:#b9cac5; }
.currency-picker-sheet > header { min-height:58px; display:flex; align-items:center; justify-content:space-between; }
.currency-picker-sheet > header > div { display:grid; gap:1px; }
.currency-picker-sheet > header strong { font-size:16px; }
.currency-picker-sheet > header span,.currency-picker-sheet > p { color:#7b8884; font-size:11px; }
.currency-picker-sheet > header > button { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:8px; background:#f0f5f3; color:#536762; }
.currency-picker-sheet > p { margin:13px 2px 7px; }
.currency-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.currency-list.compact { grid-template-columns:1fr; }
.currency-list > button { min-width:0; height:58px; display:grid; grid-template-columns:38px minmax(0,1fr) 20px; align-items:center; gap:9px; border:1px solid #dce7e4; border-radius:8px; padding:7px 10px; background:#fff; color:#344640; text-align:left; }
.currency-list > button.selected { border-color:#087f72; background:#f0f8f6; color:#087f72; }
.currency-list > button > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#edf3f1; color:#344640; font-size:15px; font-weight:750; }
.currency-list > button > strong { min-width:0; display:grid; gap:1px; font-size:13px; }
.currency-list small { color:#82908c; font-size:10px; font-weight:600; }
@media (max-width:350px) { .currency-list { grid-template-columns:1fr; } }
</style>
