<script setup>
import { date } from 'alga-js'

const router = useRouter()

definePageMeta({
  middleware: ['auth']
})

const user = useCookie('logship_user')
const password = useCookie('password')
const form = reactive({
  id: user.value.id,
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
  processing: false,
  alert: {
    status: '',
    message: ''
  }
})

const breadCrumb = computed(() => ([
  { link: '#', text: 'Accounts'},
  { link: '#', text: 'Security', active: true}
]))

const update = async () => {
  form.processing = true
  if(form.newPassword === form.confirmPassword && form.newPassword !== form.oldPassword && form.oldPassword === password.value) {
    const data = await $fetch('/api/accounts/security', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        id: form.id,
        password: form.newPassword
      }
    })

    if(data?.status && data?.message) {
      form.alert.status = data.status
      form.alert.message = data.message
    } else {
      password.value = form.newPassword
      nextTick(() => {
        form.oldPassword = ''
        form.newPassword = ''
        form.confirmPassword = ''
        form.alert.status = 200
        form.alert.message = 'Your password has been changed'
        window.scrollTo(0, 0)
      })
    }
  }
  form.processing = false
}
</script>

<template>
  <Head>
    <Title>Security</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <div>
      <BreadCrumb :items="breadCrumb" class="mb-1.5rem" />

      <div class="card card-action mb-5">
        <div class="card-alert"></div>
        <div class="card-header">
          <h4 class="card-action-title">Security</h4>
        </div>
        <div class="collapse show">
          <div class="row m-3">
            <div v-if="form.alert.status" class="col-md-12 mb-3">
              <div class="alert" :class="Number(form.alert.status) >= 400 ? 'alert-danger' : 'alert-success'">
                <div class="alertContent">
                  <h3 class="alertTitle">{{ form.alert.status }}</h3>
                  <p class="alertText">{{ form.alert.message }}</p>
                </div>
                <div class="alertAction" @click="form.alert.status = ''"><i class="menu-icon tf-icons ti ti-x"></i></div>
              </div>
            </div>

            <div class="col-md-12 mb-3">
              <label class="label">Old Password</label>
              <input type="password" v-model="form.oldPassword" class="input" :class="{'invalid': (form.newPassword === form.oldPassword || form.oldPassword !== password) && form.oldPassword !== ''}" />
              <span class="invalidMessage">Old password does not matched or new password is the same as old password</span>
            </div>
            <div class="col-md-6 mb-3">
              <label class="label">New Password</label>
              <input type="password" v-model="form.newPassword" class="input" :class="{'invalid': form.newPassword !== form.confirmPassword && form.newPassword !== ''}" />
              <span class="invalidMessage">New password is not the same as confirm password</span>
            </div>
            <div class="col-md-6 mb-3">
              <label class="label">Confirm Password</label>
              <input type="password" v-model="form.confirmPassword" class="input" :class="{'invalid': form.newPassword !== form.confirmPassword && form.confirmPassword !== ''}" />
              <span class="invalidMessage">The confirmation of password is failed</span>
            </div>
          </div>
          <div class="row m-3">
            <div class="col-md-12 mb-3">
              <button type="button" class="btn btn-primary waves-effect waves-light" :class="(form.newPassword !== form.confirmPassword || form.newPassword === form.oldPassword || form.oldPassword !== password  || form.newPassword === '') ? 'pointerEvents-none opacity-0.6' : ''" @click="update">Change Password</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </NuxtLayout>
</template>