<template>
  <q-page class="q-pa-sm ">
    <q-card class="" bordered flat>
      <q-card-section class="text-h6 ">
        <div class="text-h6">Редактировать профиль</div>
        <div class="text-subtitle2">Заполните свой профиль</div>
      </q-card-section>
      <q-card-section class="q-pa-sm ">
        <q-list class="row ">
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section side>
              <q-avatar size="100px">
                <img src="https://i.ytimg.com/vi/IS7zaNHT-58/maxresdefault.jpg">
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-btn outline label="Добавить фото" class="text-capitalize" rounded color="primary"
                style="max-width: 120px"></q-btn>
            </q-item-section>
          </q-item>

          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.user_name" label="Имя пользователя" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.email" label="Адрес электронной почты" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.first_name" label="Имя" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.last_name" label="Фамилия" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input autogrow v-model="user_details.address" label="Адрес" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.city" label="Город" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.post_code" label="Почтовый индекс" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input type="textarea" v-model="user_details.about" label="обо мне" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn class="text-capitalize" outline color="primary">Обновить информацию пользователя</q-btn>
      </q-card-actions>
    </q-card>
    <q-card class="q-mt-sm" bordered flat>
      <q-card-section class="text-h6 q-pa-sm">
        <div class="text-h6">Изменить пароль</div>
      </q-card-section>
      <q-form @submit="onChangePassword">
        <q-card-section class="q-pa-sm row">
          <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <q-item-section>
              Текущий пароль
            </q-item-section>
          </q-item>
          <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input type="password" outlined color="primary" round v-model="currentPassword" label="Текущий пароль" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <q-item-section>
              Новый пароль
            </q-item-section>
          </q-item>
          <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input type="password" outlined color="primary" round v-model="newPassword" label="Новый пароль" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <q-item-section>
              Подтвердить новый пароль
            </q-item-section>
          </q-item>
          <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input type="password" outlined round color="primary" v-model="confirmPassword"
                label="Подтвердить новый пароль" />
            </q-item-section>
          </q-item>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn type="submit" class="text-capitalize" outline color="primary">Изменить пароль</q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-page>
</template>

<script >

import { defineComponent } from 'vue';
import { useUsersStore } from 'src/stores/users';
import { mapActions } from 'pinia';

export default defineComponent({
  data() {
    return {
      user_name: '',
      user_details: '',
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    onChangePassword() {
      if (this.newPassword !== this.confirmPassword) {
        this.$q.notify({
          color: 'negative',
          message: 'Новый пароль и подтверждение нового пароля не совпадают!'
        });
        return;
      }
      //заготовка для случая если новый пароль совпадает с текущим(почему то не работает нижняя часть кода.)
      // else if(this.currentPassword == this.newPassword); {
      //   this.$q.notify({
      //     color: 'warning',
      //     message: 'Новый пароль совпадает с текущим, придумайте новый пароль!'
      //   });
      //   return;
      // };

      this.changePassword({ pasvorto: this.currentPassword, novaPasvorto: this.newPassword })
        .then(() => {
          this.$q.notify({
            color: 'positive',
            message: 'Пароль успешно изменен!'
          });
          this.currentPassword = '';
          this.newPassword = '';
          this.confirmPassword = '';
        })
        .catch(error => {
          this.$q.notify({
            color: 'negative',
            message: 'Ошибка при изменении пароля: ' + error.message
          });
        });
    },
    ...mapActions(useUsersStore, ['changePassword']),
  }
});
</script>

<style scoped></style>
