<script setup lang="ts">
import { useLocale, useTheme } from 'vuetify';
import { useUsersStore } from '@/stores/users';
import { validEmail, validName } from '@/mixins/validator';
import { useGroupsStore } from '@/stores/groups';

defineProps<{
  modelValue: boolean;
}>();

const $users = useUsersStore();
const $groups = useGroupsStore();

const { t } = useLocale();
const theme = useTheme();
const currentTheme = computed(() => theme.global.name.value);

const groupItems = computed(() => {
  const d = Object.values($groups.all).map((v) => ({
    title: v.name,
    value: v.ID,
  }));
  d.unshift({
    title: t('$vuetify.users.creation.fields.no-group'),
    value: -1,
  });

  return d;
});

const validForm: ComputedRef<boolean> = computed(
  () =>
    !(
      !$users.form.email ||
      !$users.form.groupID ||
      !$users.form.realName ||
      !validEmail($users.form.email) ||
      !validName($users.form.realName)
    ),
);

const onConfirm = () => {
  $users.isEditing ? $users.editUser() : $users.createUser();
};
</script>

<template>
  <v-dialog persistent :model-value="modelValue" width="450">
    <v-card>
      <template v-slot:title>
        <v-card-title class="p-0 w-full flex items-center">
          <span class="mso mr-1 text-2xl">{{
            $users.isEditing ? 'person' : 'person_add'
          }}</span>
          <span>{{
            t(`$vuetify.users.creation.${$users.isEditing ? 'edit' : 'create'}`)
          }}</span>
        </v-card-title>
      </template>

      <!-- Form -->
      <div class="flex flex-col w-full px-5">
        <!-- ID of user -->
        <v-text-field
          v-if="$users.isEditing"
          v-model="$users.form.ID"
          readonly
          :label="t('$vuetify.users.creation.fields.ID')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          hide-details
          flat
          density="comfortable"
          class="mb-3"
        />
        <!-- User email -->
        <v-text-field
          v-model="$users.form.email"
          :label="t('$vuetify.users.creation.fields.email')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          hide-details
          flat
          density="comfortable"
        />
        <!-- Name of user -->
        <v-text-field
          v-model="$users.form.realName"
          :label="t('$vuetify.users.creation.fields.name')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          hide-details
          class="mt-3"
          flat
          density="comfortable"
        />
        <!-- User group -->
        <v-autocomplete
          v-model="$users.form.groupID"
          :items="groupItems"
          :label="t('$vuetify.users.creation.fields.group')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          class="mt-3"
          hide-details
          flat
          density="comfortable"
        >
          <template v-slot:selection="{ item }">
            <span>{{ item.title }}</span>
          </template>
        </v-autocomplete>

        <!-- Error -->
        <ErrorPlate :error="$users.errorCreate" no-border />
      </div>

      <!-- Actions -->
      <v-card-actions class="flex justify-end p-5 gap-1">
        <!-- Cancel -->
        <v-btn
          variant="text"
          class="px-4"
          :text="t('$vuetify.actions.cancel')"
          @click="$users.closeModal()"
        ></v-btn>
        <!-- Confirm -->
        <v-btn
          variant="flat"
          color="primary"
          class="px-4"
          :text="t('$vuetify.actions.confirm')"
          :loading="$groups.loadingCreate"
          :disabled="!validForm"
          :class="{
            'disabled-button': !validForm,
          }"
          @click="onConfirm()"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
