<script setup>
const props = defineProps({
  address: Object,
  selected: Boolean,
});

const showModal = ref(false);

function openEditModal() {
  showModal.value = {
    component: "pos/EditAddress",
    title: "Cập nhật địa chỉ",
    width: "50%",
    height: "auto",
    vbind: { address: props.address },
  };
}
</script>

<template>
  <div
    :class="['card is-clickable', selected && 'selected']"
    @click="$emit('selectAddress', address.id)"
  >
    <div class="card-content is-flex is-justify-content-space-between">
      <div>
        <div class="fs-14 is-flex is-gap-1 is-align-items-center">
          <p>{{ address.address_detail }}</p>
          <span
            v-if="address.is_default"
            class="tag is-primary is-light"
          >
            Mặc định</span
          >
          <button
            @click.stop="openEditModal"
            class="button is-small is-white rounded-full p-0 size-7"
          >
            <span class="icon">
              <Icon
                name="material-symbols:edit-outline-rounded"
                :size="16"
                class="has-text-primary"
              />
            </span>
          </button>
        </div>
        <p class="has-text-grey is-size-7">
          <span>Phường {{ address.ward }}</span>
          <span>, </span>
          <span>Quận {{ address.district }}</span>
          <span>, </span>
          <span>{{ address.city }}</span>
        </p>
      </div>
      <span
        v-if="selected"
        class="icon has-background-primary-95 rounded-full"
      >
        <Icon
          name="material-symbols:check-rounded"
          :size="18"
          class="has-text-primary"
        />
      </span>
    </div>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = null"
      @update="$emit('update')"
    />
  </div>
</template>
<style scoped>
.card {
  &:hover {
    border-color: var(--bulma-primary);
  }
  &.selected {
    border-color: var(--bulma-primary);
  }
}
.card-content {
  --bulma-card-content-padding: 1rem;
}
</style>
