<script setup>
import { isEqual } from "es-toolkit";

const props = defineProps({
  customerId: Number,
  address: Object,
});

const emit = defineEmits(["modalevent", "close"]);

const { $insertapi, $patchapi } = useNuxtApp();
const addressRef = ref({ ...props.address });
const isLoading = ref(false);

async function submitAddress() {
  isLoading.value = true;
  const payload = {
    ...addressRef.value,
    customer: props.customerId,
  };
  const res = props.address
    ? await $patchapi("Customer_Address", payload)
    : await $insertapi("Customer_Address", { data: payload });
  isLoading.value = false;
  emit("modalevent", { name: "submit" });
  emit("close");
}

const isDirty = computed(() => {
  if (props.address) return !isEqual(props.address, addressRef.value);
  return true;
});
const isValid = computed(() => {
  if (!addressRef.value.city) return false;
  if (!addressRef.value.district) return false;
  if (!addressRef.value.ward) return false;
  if (!addressRef.value.address_detail) return false;
  return true;
});
</script>

<template>
  <form>
    <div class="field">
      <label class="label">Địa chỉ</label>
      <div class="control">
        <input
          v-model="addressRef.address_detail"
          class="input"
          type="text"
          placeholder="Địa chỉ"
        />
      </div>
    </div>
    <div class="fixed-grid has-12-cols">
      <div class="grid">
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Phường</label>
            <div class="control">
              <input
                v-model="addressRef.ward"
                class="input"
                type="text"
                placeholder="Phường"
              />
            </div>
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Quận</label>
            <div class="control">
              <input
                v-model="addressRef.district"
                class="input"
                type="text"
                placeholder="Quận"
              />
            </div>
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Thành phố</label>
            <div class="control">
              <input
                v-model="addressRef.city"
                class="input"
                type="text"
                placeholder="Thành phố"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox is-flex is-gap-0.5 is-align-items-center">
          <Icon
            :name="
              addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
            "
            :class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-70']"
            :size="24"
            @click="addressRef.is_default = !addressRef.is_default"
          />
          <span>Địa chỉ mặc định</span>
          <input
            type="checkbox"
            class="is-sr-only"
            v-model="addressRef.is_default"
          />
        </label>
      </div>
    </div>
    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <button
          type="button"
          class="button is-white"
          @click="$emit('close')"
        >
          Huỷ
        </button>
      </div>
      <div class="control">
        <button
          type="button"
          :class="['button is-link', isLoading && 'is-loading']"
          :disabled="address ? !isDirty || !isValid : !isValid"
          @click="submitAddress"
        >
          <span class="icon">
            <Icon
              :name="address ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
              :size="18"
            />
          </span>
          <span>{{ address ? "Cập nhật" : "Tạo" }}</span>
        </button>
      </div>
    </div>
  </form>
</template>
