<template>
  <Dialog
    :visible="opened"
    modal
    :style="{ width: '50vw' }"
    @hide="display = true"
    :pt="{
      header: { style: ' display:none' },
      content: { style: 'padding: 0 !important;border-radius: 10px ' },
    }"
  >
    <div class="flex h-full flex-col justify-between p-10">
      <div class="flex justify-end">
        <button
          class="bg-background-3 text-primary flex h-8 w-8 items-center justify-center rounded-full"
          @click="$emit('close')"
        >
          <span class="font-bold">X</span>
        </button>
      </div>
      <div class="mb-5 flex justify-center">
        <section-title class="justify-center"
          >Suppréssion de compte</section-title
        >
      </div>

      <Message severity="error" v-if="error">
        {{ error }}
      </Message>
      <div>
        <p>Nous sommes désolés de vous voir partir. 😔</p>
        <br />
        <p>
          Si vous avez des préoccupations ou des réclamations, n'hésitez pas à
          nous contacter au <a href="tel:+33767473005"><b>0767473005</b></a> ou
          par mail à l'adresse
          <a href="mailto:contact@funargos.fr"><b>contact@funargos.fr</b></a
          >, nous repondrons à vos questions avec plaisir.
        </p>
        <br />
        <p>
          Veuillez noter que la suppression de votre compte est une action
          définitive et irréversible. Toutes vos données seront définitivement
          effacées.
        </p>
      </div>
      <div class="align-items-center my-10 flex">
        <checkbox
          v-model="checked"
          name="checked"
          inputId="checked"
          :binary="true"
          class="mr-2"
        />
        <label for="checked"
          >En cochant cette case, je confirme que je suis conscient que la
          suppression de mon compte est une action irréversible et que toutes
          mes données seront définitivement effacées.</label
        >
      </div>
      <rounded-button
        @click=""
        :loading="loading"
        class="max-md:px-24"
        design="5"
        icon="check"
        :disabled="!checked"
      >
        Je confirme la suppression de mon compte
      </rounded-button>
    </div>
  </Dialog>
</template>
<script setup>
import { defineProps } from "vue";
import Checkbox from "primevue/checkbox";
import Button from "primevue/button";

const props = defineProps({
  opened: {
    type: Boolean,
    default: false,
  },
});

const checked = ref(false);
const emit = defineEmits(["confirm", "close"]);

const deleteAccount = async () => {
  loading.value = true;
  try {
    await $api.call("post", $api.route("user.delete"));
    $toast.success("Votre compte a bien été supprimé");
    $event("user.deleted");
    emit("close");
  } catch (e) {
    $toast.error("Une erreur est survenue");
    error.value = e.response.data.message;
  } finally {
    loading.value = false;
  }
};

const markReservationAsCompleted = async () => {
  loading.value = true;
  try {
    await $api.call(
      "post",
      $api.route("reservation.completed", {
        reservation: props.reservation.id,
      })
    );

    $toast.success("Le trajet a bien été marqué comme terminé");
    $event("reservation.completed");
    emit("close");
  } catch (e) {
    $toast.error("Une erreur est survenue");
    error.value = e.response.data.message;
  } finally {
    loading.value = false;
  }
};
</script>
