<template>
  <teleport to="body">
    <modal v-if="state.show_modal" @close="close">
      <template v-slot:header>
        <h2>Détails d'une adresse</h2>
      </template>
      <template v-slot:body>
        <address-details-content
          :address="props.address"
          @update-address="onUpdateAddress"
        ></address-details-content>
      </template>
    </modal>
  </teleport>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { Address } from "../../../types";
import AddressDetailsContent from "./AddressDetailsContent.vue";

interface AddressModalProps {
  address: Address;
}

interface AddressModalState {
  show_modal: boolean;
}

const props = defineProps<AddressModalProps>();

const emit = defineEmits<(e: "update-address", value: Address) => void>();

const state: AddressModalState = reactive({ show_modal: false });

const open = (): void => {
  state.show_modal = true;
};

const close = (): void => {
  state.show_modal = false;
};

const onUpdateAddress = (address: Address): void => {
  emit("update-address", address);
};

defineExpose({
  close,
  open,
});
</script>

<style scoped></style>
