<script setup lang="ts">
import { computed } from 'vue';
import { useLocale, useTheme } from 'vuetify';
import { usePermissionsStore } from '@/stores/permissions';
import { useGroupsStore } from '@/stores/groups';
import { validName } from '@/mixins/validator';

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

const $permissions = usePermissionsStore();
const $groups = useGroupsStore();

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

const items = computed(() =>
  Object.values($permissions.all).map((v) => ({
    title: t(`$vuetify.permissions.${v}`),
    value: v,
  })),
);

const validForm: ComputedRef<boolean> = computed(
  () =>
    !(
      !$groups.form.name ||
      !$groups.form.permissions ||
      !validName($groups.form.name)
    ),
);

const onConfirm = () => {
  $groups.isEditing ? $groups.editGroup() : $groups.createGroup();
};
</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">{{
            $groups.isEditing ? 'group' : 'group_add'
          }}</span>
          <span>{{
            t(
              `$vuetify.groups.creation.${$groups.isEditing ? 'edit' : 'create'}`,
            )
          }}</span>
        </v-card-title>
      </template>

      <!-- Form -->
      <div class="flex flex-col w-full px-5">
        <!-- ID of group -->
        <v-text-field
          v-if="$groups.isEditing"
          v-model="$groups.form.ID"
          readonly
          :label="t('$vuetify.groups.creation.fields.ID')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          hide-details
          flat
          density="comfortable"
          class="mb-3"
        />
        <!-- Name of group -->
        <v-text-field
          v-model="$groups.form.name"
          :label="t('$vuetify.groups.creation.fields.name')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          hide-details
          flat
          density="comfortable"
        />

        <!-- Group permissions -->
        <v-select
          v-model="$groups.form.permissions"
          :items="items"
          :label="t('$vuetify.groups.creation.fields.permissions')"
          :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
          class="mt-3"
          multiple
          hide-details
          flat
          density="comfortable"
        >
          <template v-slot:selection="{ item, index }">
            <v-chip v-if="index < 2">
              <span>{{ item.title }}</span>
            </v-chip>
            <span
              v-if="index === 2"
              class="text-grey text-caption align-self-center"
            >
              (+{{ ($groups.form.permissions?.length ?? 0) - 2 }})
            </span>
          </template>
        </v-select>

        <!-- Error -->
        <ErrorPlate :error="$groups.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="$groups.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>
