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

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

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

const { $patchapi } = useNuxtApp();
const addressRef = ref({ ...props.address });
const isLoading = ref(false);
async function updateAddress() {
  isLoading.value = true;
  const updated = await $patchapi("Customer_Address", addressRef.value);
  isLoading.value = false;
  emit("modalevent", { name: "update" });
}
</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="Text input"
              />
            </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="Text input"
              />
            </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="Text input"
              />
            </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-light']"
            :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="isEqual(address, addressRef)"
          @click="updateAddress"
        >
          <span class="icon">
            <Icon
              name="material-symbols:edit-outline-rounded"
              :size="16"
            />
          </span>
          <span>Cập nhật</span>
        </button>
      </div>
    </div>
  </form>
</template>
