<template>
  <v-icon v-if="adminMenu" class="me-2" size="small" @click="edit = true"
    >mdi-pencil</v-icon
  >
  <v-btn v-else icon class="mr-3" @click="edit = true">
    <Users />
  </v-btn>
  <v-dialog v-model="edit" width="600" persistent>
    <v-card max-width="600">
      <v-form @submit.prevent="submitGroup">
        <v-card-title>
          <span class="headline">Edit User</span>
        </v-card-title>
        <v-card-subtitle>
          <span>Edit a User inside the database</span>
        </v-card-subtitle>
        <v-card-text>
          <div>
            <v-text-field
              label="User Name *"
              v-model="editUserName"
              variant="outlined"
              clearable
              :rules="editUserNameRules"
              class="mb-3"
            ></v-text-field>
            <v-text-field
              label="User Email *"
              v-model="editUserEmail"
              variant="outlined"
              clearable
              :rules="editUserEmailRules"
              class="mb-3"
            ></v-text-field>
            <v-text-field
              label="User Password (Optional)"
              v-model="editUserPassword"
              variant="outlined"
              clearable
              class="mb-3"
            ></v-text-field>
            <v-switch
              label="Admin (Optional)"
              inset
              v-model="editUserAdmin"
              color="primary"
              v-if="adminMenu"
            ></v-switch>
            <span class="dialogNote">
              all fields marked with * are required
            </span>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-row>
            <v-col cols="10" align="right" no-gutters>
              <v-btn
                class="ms-auto"
                text="Cancel"
                color="blue darken-1"
                @click="edit = false"
              ></v-btn>
            </v-col>
            <v-col>
              <v-btn
                class="ms-auto"
                text="Update"
                type="submit"
                color="blue darken-1"
              ></v-btn>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-form>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SubmitEventPromise } from "vuetify";
import { axiosInstance } from "@/client";
import { useMutation, useQueryClient } from "@tanstack/vue-query";
import { CreateLicenseDto, User } from "@/types";
import { Users } from "lucide-vue-next";

const { user, adminMenu } = defineProps<{ user: User; adminMenu: boolean }>();

const queryClient = useQueryClient();

const editUserNameRules = [
  (value: string) => {
    if (value) return true;

    return "YOU MUST ENTER (A USER NAME)";
  },
];

const editUserEmailRules = [
  (value: string) => {
    if (value) return true;

    return "YOU MUST ENTER (A EMAIL NAME)";
  },
];

async function submitGroup(event: SubmitEventPromise) {
  const result = await event;
  if (result.valid) {
    const userData = {
      name: editUserName.value,
    };
    console.log(userData);
    userMutate(userData);
  } else {
    console.log("Invalid");
  }
}

const { mutate: userMutate } = useMutation({
  mutationFn: async (newLicense: CreateLicenseDto) => {
    await axiosInstance.post("/licenses", newLicense);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["users"] });
    edit.value = false;
  },
});

const edit = ref(false);
const editUserName = ref(user.name);
const editUserEmail = ref(user.email);
const editUserAdmin = ref(user.admin);
const editUserPassword = ref(undefined);
</script>

<style scoped></style>
