<script setup>
import { ref, reactive, nextTick } from 'vue';

import JetInput from './Input.vue';
import JetButton from './Button.vue';
import JetInputError from './InputError.vue';
import JetDialogModal from './DialogModal.vue';
import JetSecondaryButton from './SecondaryButton.vue';

const emit = defineEmits(['confirmed']);

defineProps({
  title: {
    type: String,
    default: 'Confirm Password',
  },
  content: {
    type: String,
    default: 'For your security, please confirm your password to continue.',
  },
  button: {
    type: String,
    default: 'Confirm',
  },
});

const confirmingPassword = ref(false);

const form = reactive({
  password: '',
  error: '',
  processing: false,
});

const passwordInput = ref(null);

const startConfirmingPassword = () => {
  axios.get(route('password.confirmation')).then(response => {
    if (response.data.confirmed) {
      emit('confirmed');
    } else {
      confirmingPassword.value = true;

      setTimeout(() => passwordInput.value.focus(), 250);
    }
  });
};

const confirmPassword = () => {
  form.processing = true;

  axios
    .post(route('password.confirm'), {
      password: form.password,
    })
    .then(() => {
      form.processing = false;

      closeModal();
      nextTick().then(() => emit('confirmed'));
    })
    .catch(error => {
      form.processing = false;
      form.error = error.response.data.errors.password[0];
      passwordInput.value.focus();
    });
};

const closeModal = () => {
  confirmingPassword.value = false;
  form.password = '';
  form.error = '';
};
</script>

<template>
  <span>
    <span @click="startConfirmingPassword">
      <slot />
    </span>

    <JetDialogModal :show="confirmingPassword" @close="closeModal" max-width="sm">
      <template #title>
        {{ title }}
      </template>

      <template #content>
        {{ content }}

        <div class="mt-4">
          <JetInput
            type="password"
            ref="passwordInput"
            placeholder="Password"
            v-model="form.password"
            class="mt-1 block w-full"
            @keyup.enter="confirmPassword"
          />

          <JetInputError :message="form.error" class="mt-2" />
        </div>
      </template>

      <template #footer>
        <JetSecondaryButton @click="closeModal"> Cancel </JetSecondaryButton>

        <JetButton class="ml-3" :class="{ 'opacity-25': form.processing }" :disabled="form.processing" @click="confirmPassword">
          {{ button }}
        </JetButton>
      </template>
    </JetDialogModal>
  </span>
</template>
