<template>
  <template v-if="props.address.refStatus !== 'match'">
    <div
      v-if="
        props.address.refStatus === 'to_review' ||
        props.address.refStatus === 'reviewed'
      "
      :class="{
        alert: true,
        'alert-danger': props.address.refStatus === 'to_review',
        'alert-warning': props.address.refStatus === 'reviewed',
      }"
    >
      <p v-if="props.address.refStatus === 'to_review'">
        <i class="fa fa-warning"></i> L'adresse de référence a été modifiée.
      </p>
      <p v-if="props.address.refStatus === 'reviewed'">
        L'adresse est conservée, mais diffère de l'adresse de référence.
      </p>

      <template
        v-if="
          props.address.addressReference.street !== props.address.street ||
          props.address.addressReference.streetNumber !==
            props.address.streetNumber
        "
      >
        <template v-if="props.address.country.code === 'BE'">
          <div class="difference">
            <span class="old"
              >{{ props.address.street }} {{ props.address.streetNumber }}</span
            >
            <span class="new"
              >{{ props.address.addressReference.street }}
              {{ props.address.addressReference.streetNumber }}</span
            >
          </div>
        </template>
        <template v-else>
          <div class="difference">
            <span class="old"
              >{{ props.address.streetNumber }} {{ props.address.street }}</span
            >
            <span class="new"
              >{{ props.address.addressReference.streetNumber }}
              {{ props.address.addressReference.street }}</span
            >
          </div>
        </template>
      </template>

      <template
        v-if="
          props.address.addressReference.postcode.id !==
          props.address.postcode.id
        "
      >
        <div class="difference">
          <span class="old"
            >{{ props.address.postcode.code }}
            {{ props.address.postcode.name }}</span
          >
          <span class="new"
            >{{ props.address.addressReference.postcode.code }}
            {{ props.address.addressReference.postcode.name }}</span
          >
        </div>
      </template>

      <template
        v-if="
          props.address.point !== null &&
          (props.address.point.coordinates[0] !==
            props.address.addressReference.point.coordinates[0] ||
            props.address.point.coordinates[1] !==
              props.address.addressReference.point.coordinates[1])
        "
      >
        <div class="difference">
          <span class="old"
            >{{ props.address.point.coordinates[0] }}
            {{ props.address.point.coordinates[1] }}</span
          >
          <span class="new"
            >{{ props.address.addressReference.point.coordinates[0] }}
            {{ props.address.addressReference.point.coordinates[1] }}</span
          >
        </div>
      </template>

      <ul class="record_actions">
        <li v-if="props.address.refStatus === 'to_review'">
          <button class="btn btn-sm btn-update" @click="applyUpdate">
            Appliquer les modifications
          </button>
        </li>
        <li v-if="props.address.refStatus === 'to_review'">
          <button class="btn btn-sm btn-primary" @click="keepCurrentAddress">
            Conserver
          </button>
        </li>
        <li v-if="props.address.refStatus === 'reviewed'">
          <button class="btn btn-sm btn-primary" @click="backToReview">
            Ré-examiner
          </button>
        </li>
      </ul>
    </div>
  </template>
</template>

<script lang="ts" setup>
import { Address } from "../../../../types";
import {
  markAddressReviewed,
  markAddressToReview,
  syncAddressWithReference,
} from "../../../../lib/api/address";

export interface AddressDetailsRefMatchingProps {
  address: Address;
}

const props = defineProps<AddressDetailsRefMatchingProps>();

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

const applyUpdate = async () => {
  const new_address = await syncAddressWithReference(props.address);

  emit("update-address", new_address);
};

const keepCurrentAddress = async () => {
  const new_address = await markAddressReviewed(props.address);

  emit("update-address", new_address);
};

const backToReview = async () => {
  const new_address = await markAddressToReview(props.address);

  emit("update-address", new_address);
};
</script>

<style scoped lang="scss">
.difference {
  margin-bottom: 0.5rem;

  span {
    display: block;
  }

  .old {
    text-decoration: red line-through;
  }
  .new {
    font-weight: bold;
    color: green;
  }
}
</style>
