<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Edit User</div>
      </v-card-title>
      <v-card-text>
          <div class="my-3">
            <div class="subheading secondary--text text--lighten-2">Username</div>
            <div
              class="title primary--text text--darken-2"
              v-if="userById(Id)"
            >{{ userById(Id)!.email}}</div>
            <div
              class="title primary--text text--darken-2"
              v-else
            >-----</div>
          </div>
          <v-form
            v-model="valid"
            ref="form"
            lazy-validation
          >
            <v-text-field
              label="Full Name"
              v-model="fullName"
            ></v-text-field>
            <v-text-field
              label="E-mail"
              type="email"
              v-model="email"
              :rules="emailRules"
            ></v-text-field>
            <div class="subheading secondary--text text--lighten-2">User is superuser <span v-if="isSuperuser">(currently is a superuser)</span><span v-else>(currently is not a superuser)</span></div>
            <v-checkbox
              label="Is Superuser"
              v-model="isSuperuser"
            ></v-checkbox>
            <div class="subheading secondary--text text--lighten-2">User is active <span v-if="isActive">(currently active)</span><span v-else>(currently not active)</span></div>
            <v-checkbox
              label="Is Active"
              v-model="isActive"
            ></v-checkbox>
            <v-row align="center">
              <v-col class="flex-grow-0 flex-shrink-1">
                <v-checkbox
                  v-model="setPassword"
                  class="mr-12"
                ></v-checkbox>
              </v-col>
              <v-col>
                <v-text-field
                  :disabled="!setPassword"
                  type="password"
                  v-model="password1"
                  label="Set Password"
                  :rules="password1Rules"
                >
                </v-text-field>
                <v-text-field
                  v-show="setPassword"
                  type="password"
                  v-model="password2"
                  label="Confirm Password"
                  :rules="password2Rules"
                >
                </v-text-field>
              </v-col>
            </v-row>
          </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="cancel">Cancel</v-btn>
        <v-btn @click="reset">Reset</v-btn>
        <v-btn
          @click="submit"
          :disabled="!valid"
        >
          Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { useAdminStore } from '@/stores/admin';
import type { IUserProfile, IUserProfileUpdate } from '@/interfaces';
import { ref, onMounted } from 'vue';
import { emailRules, nameRules, password1Rules, usePassword2Rules } from '@/utils';
import router from '@/router';
import { storeToRefs } from 'pinia';

const valid = ref(true);
const fullName = ref('');
const email = ref('');
const isActive = ref(true);
const isSuperuser = ref(false);
const setPassword = ref(false);
const password1 = ref('');
const password2 = ref('');

const password2Rules = usePassword2Rules(password1);

const adminStore = useAdminStore();
const adminStoreRef = storeToRefs(adminStore);
const form = ref(null);

const userById = adminStore.readAdminOneUser;
const Id = (+router.currentRoute.value.params.id);

function reset() {
  setPassword.value = false;
  password1.value = '';
  password2.value = '';
  (form as any).value.reset();
  const user = userById(Id);
  if (user) {
    fullName.value = user.full_name || '';
    email.value = user.email;
    isActive.value = user.is_active;
    isSuperuser.value = user.is_superuser;
  }
} 

function cancel() {
  router.back();
}

async function submit() {
  await (form as any).value.validate();
  if (valid.value) {
    const updateProfile: IUserProfileUpdate = {};
    if (fullName.value) {
      updateProfile.full_name = fullName.value;
    }
    if (email.value) {
      updateProfile.email = email.value;
    }
    updateProfile.is_active = isActive.value;
    updateProfile.is_superuser = isSuperuser.value;
    if (setPassword) {
      updateProfile.password = password1.value;
    }
    const user = userById(Id);
    await adminStore.actionUpdateUser({id: user!.id, user: updateProfile});
    router.push('/main/admin/users')
  }
}

onMounted(async () => {
  await adminStore.actionGetUsers();
  reset();
})
</script>