<template>
<!--  <form class="form" @submit.prevent="handleUpdate()">-->
  <form class="form" @submit.prevent="">
    <ui-input
        :type="'text'"
        :placeholder="t('fields.firstName')"
        :rules="[required]"
        v-model="firstName"
    />
    <ui-input
        :type="'text'"
        :placeholder="t('fields.lastName')"
        :rules="[required]"
        v-model="lastName"
    />
    <ui-input
        :type="'email'"
        :placeholder="t('fields.email')"
        :rules="[isEmail]"
        v-model="email"
    />
    <ui-input
        :type="'text'"
        :placeholder="t('fields.phoneNumber')"
        :rules="[required]"
        v-model="phoneNumber"
    />
    <ui-input
        :type="'password'"
        :placeholder="t('fields.newPassword')"
        :rules="[isPasswordValid]"
        v-model="password"
    />
    <ui-input
        :type="'password'"
        :placeholder="t('fields.confirmNewPassword')"
        :rules="[compareStrings]"
        v-model="confirmPassword"
    />
<!--    <ui-button-->
<!--        class="form__button"-->
<!--        :isLoading="loading"-->
<!--    >-->
<!--      {{ t('buttons.save') }}-->
<!--    </ui-button>-->
    <ui-button
        class="form__button"
    >
      {{ t('buttons.save') }}
    </ui-button>
  </form>
</template>

<script setup>
import {useValidators} from "~/composables/rules";
// import {useUserUpdating} from "@/composables/user";

const { t } = useI18n()
const userStore = useUserStore()

const { required, isEmail, isPasswordValid } = useValidators()

const userFirstName = computed(() => userStore.user?.firstName)
const userLastName = computed(() => userStore.user?.lastName)
const userEmail = computed(() => userStore.user?.email)
const userPhoneNumber = computed(() => userStore.user?.phoneNumber)

const firstName = ref('')
const lastName = ref('')
const email = ref('')
const phoneNumber = ref('')
const password = ref('')
const confirmPassword = ref('')

const compareStrings = (v) => {
  if (v === password.value) return true
  return t('errors.compare')
}

// const { updateUser, loading } = useUserUpdating();
//
// watchEffect(() => {
//   firstName.value = userFirstName.value || ''
//   lastName.value = userLastName.value || ''
//   email.value = userEmail.value || ''
//   phoneNumber.value = userPhoneNumber.value || ''
// })
//
// async function handleUpdate() {
//   await updateUser(
//       firstName.value,
//       lastName.value,
//       email.value,
//       phoneNumber.value,
//       password.value,
//       confirmPassword.value,
//   );
// }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>