<script setup lang="ts">
import { ref } from 'vue'
import type { PowerItem } from '@/types/PowerItem'
import { getCurrentInstance } from 'vue'
import {User} from "oidc-client";
import axios from 'axios';

type EventItemListing = {
  name: string
  id: number
}

const loading = ref(false)

const itemType = ref(0)
const itemName = ref('')
const iconURL = ref('')
const minPower = ref(0)
const maxPower = ref(0)
const rarity = ref(0)
const origin = ref('')
const tooltip = ref('')
const isEventItem = ref(false)

const eventItems = [
  {
    name: 'Blessing Power',
    id: 1
  },
  {
    name: 'Intimacy Power',
    id: 2
  },
  {
    name: 'Fellow Power',
    id: 3
  }
]
const rarities = [
  {
    name: 'Green',
    id: 1
  },
  {
    name: 'Blue',
    id: 2
  },
  {
    name: 'Purple',
    id: 3
  },
  {
    name: 'Yellow',
    id: 4
  },
  {
    name: 'Red',
    id: 5
  }
]
const yesNo = [
  {
    name: 'Yes',
    id: 1
  },
  {
    name: 'No',
    id: 0
  }
]

// Yes, I do want any, I don't know WHAT they have typed, but this rule is only checking that they typed SOMETHING.
const requiredField = (v: any) => (v ? true : 'This field is required.')
const textRules = [requiredField]
const minPowerRules = [
  requiredField,
  (v: number) =>
    v <= maxPower.value ? true : 'Minimum power must be less than or equal to maximum power.'
]
const maxPowerRules = [
  requiredField,
  (v: number) =>
    v >= minPower.value ? true : 'Maximum power must be greater than or equal to minimum power.'
]
const listToProps = (item: EventItemListing) => ({ title: item.name, value: item.id })
const yesNoProps = (item: EventItemListing) => ({ title: item.name, value: item.id === 1 })
const submit = () => {
  loading.value = true
  try {
    // Get the user's JWT token
    getCurrentInstance()!
      .appContext.config.globalProperties.$zitadel!.oidcAuth.mgr.getUser()
      .then((oidcUser: User | null) => {
        if (oidcUser === null) {
          // TODO: Add some error handling to the page
          console.log("OIDC user was null")
          return
        }
        const newItem: PowerItem = {
          itemType: itemType.value,
          iconURL: iconURL.value,
          itemName: itemName.value,
          minItemPower: minPower.value,
          maxItemPower: maxPower.value,
          owned: 0,
          rarity: rarity.value,
          origin: origin.value,
          tooltip: tooltip.value,
          isEventItem: isEventItem.value
        }
        const userJWT = oidcUser.access_token
        axios.post()
      })
  } catch (e) {
    console.log(e)
    loading.value = false
  }
}
const clearForm = () => {
  itemType.value = 0
  itemName.value = ''
  iconURL.value = ''
  minPower.value = 0
  maxPower.value = 0
  rarity.value = 0
  origin.value = ''
  tooltip.value = ''
  isEventItem.value = false
}
</script>

<template>
  <v-container>
    <v-row justify="center">
      <v-col lg="8" sm="12">
        <v-card :loading="loading" color="deep-purple-darken-4">
          <v-card-title>Add New Item</v-card-title>
          <v-card-item>
            <v-form @submit.prevent>
              <v-container>
                <v-row>
                  <v-select
                    :items="eventItems"
                    :item-props="listToProps"
                    v-model="itemType"
                    label="Item Type"
                  ></v-select>
                </v-row>
                <v-row>
                  <v-text-field
                    v-model="itemName"
                    :rules="textRules"
                    label="Item Name"
                  ></v-text-field>
                </v-row>
                <v-row>
                  <v-text-field
                    v-model="iconURL"
                    :rules="textRules"
                    label="Image URL"
                    disabled
                  ></v-text-field>
                </v-row>
                <v-row>
                  <v-col class="pl-0">
                    <v-text-field
                      v-model="minPower"
                      :rules="minPowerRules"
                      label="Minimum Power"
                    ></v-text-field>
                  </v-col>
                  <v-col class="pr-0">
                    <v-text-field
                      v-model="maxPower"
                      :rules="maxPowerRules"
                      label="Maximum Power"
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row>
                  <v-select
                    v-model="rarity"
                    :items="rarities"
                    :item-props="listToProps"
                    label="Rarity"
                  ></v-select>
                </v-row>
                <v-row>
                  <v-text-field v-model="origin" :rules="textRules" label="Origin"></v-text-field>
                </v-row>
                <v-row>
                  <v-text-field v-model="tooltip" :rules="textRules" label="Tooltip"></v-text-field>
                </v-row>
                <v-row>
                  <v-select
                    v-model="isEventItem"
                    :items="yesNo"
                    :item-props="yesNoProps"
                    label="Is From An Event?"
                  ></v-select>
                </v-row>
              </v-container>
            </v-form>
          </v-card-item>
          <v-card-actions>
            <v-btn @click="submit">Submit</v-btn>
            <v-btn @click="clearForm">Clear</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
