<script setup>
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";
import MdrRadio from "@/components/Mudur-Ui-Kit/MdrRadio.vue";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";

const settingsStore = useSettingsStore();
const { wc } = storeToRefs(settingsStore);
</script>
<template>
  <div class="flex flex-col gap-2">
    <div class="text-base font-semibold">Vergi / Kimlik Bilgileri</div>
    <div class="text-gray-400">
      Fatura için gerekli vergi bilgilerini müşterilerinizden ödeme esnasında
      alabilirsiniz yada zaten bu bilgiler mevcut ise sipariş metası belirtip
      faturaya aktarabilirsiniz.
    </div>
    <div class="flex flex-col gap-4">
      <MdrRadio
        v-model="wc.checkout_fields.mode"
        value="no"
        name="mode"
        label="Kapalı"
        help="Fatura bilgileri sisteme iletilmeyecektir."
      />
      <MdrRadio
        v-model="wc.checkout_fields.mode"
        value="self"
        name="mode"
        label="Alan Oluştur"
        help="Fatura bilgileri için ödeme alanları arasına yeni bir alan ekleyerek ödeme esnasında bilgileri alır."
      />
      <MdrToggle
        v-if="wc.checkout_fields.mode === 'self'"
        v-model="wc.checkout_fields.required"
        >Vergi alanını zorunlu tut</MdrToggle
      >
      <MdrRadio
        v-model="wc.checkout_fields.mode"
        value="meta"
        name="mode"
        label="Metadan Oku"
        help="Fatura bilgilerini sipariş metasından okur."
      />
      <MdrFormField
        v-if="wc.checkout_fields.mode === 'meta'"
        v-model="wc.checkout_fields.meta_key"
        placeholder="_billing_tax_number"
        label="Meta Anahtarı"
        class="w-1/3"
      />
    </div>
  </div>
</template>
