<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Create User</div>
      </v-card-title>
      <v-card-text>
          <v-form v-model="valid" ref="form">
            <v-text-field label="Full Name" v-model="fullName" :rules="nameRules" required></v-text-field>
            <v-text-field label="E-mail" type="email" v-model="email" :rules="emailRules" required></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>
                <v-text-field type="password" label="Set Password" v-model="password1" :rules="password1Rules" required>
                </v-text-field>
                <v-text-field type="password" label="Confirm Password" v-model="password2" :rules="password2Rules" required>
                </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 { ref, onMounted } from 'vue';
import { useAdminStore } from '@/stores/admin';
import router from '@/router';
import type { IUserProfileCreate } from '@/interfaces';
import { emailRules, password1Rules, usePassword2Rules, nameRules } from '@/utils';


const valid = ref(false);
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 form = ref(null);

const adminStore = useAdminStore();

const password2Rules = usePassword2Rules(password1);

function reset () {
  password1.value = '';
  password2.value = '';
  fullName.value = '';
  email.value = '';
  isActive.value = true;
  isSuperuser.value = false;
  (form as any).value.resetValidation();
};

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

async function submit() {
  await (form as any).value.validate();
  if (valid.value){
    const updateProfile: IUserProfileCreate = {
      email: '',
      password: '',
    }
    if (fullName.value) {
      updateProfile.full_name = fullName.value;
    }
    if (email.value) {
      updateProfile.email = email.value;
    }
    updateProfile.password = password1.value;
    updateProfile.is_active = isActive.value;
    updateProfile.is_superuser = isSuperuser.value;
    await adminStore.actionCreateUser(updateProfile);
    router.push('/main/admin/users');
  }
};

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



</script>