<template>
  <dialog
    ref="dialog"
    closedby="any"
  >
    <form method="dialog">
      <header class="flex-row padding">
        {{ cardLabel }}
        <PpButton class="round text">
          <Icon name="uil:times" mode="svg" />
        </PpButton>
      </header>
    </form>
      <main v-if="currentCard">
        <div class="padding flex-col">
          <div class="flex-row gap-default">
            <PpFormInput
              v-model="currentCard.name"
              id="card_name"
              label="Name"
              :class="{'error': !validFields.name }"
              :message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
            />
            <PpFormInput
              v-model="currentCard.price"
              id="card_price"
              label="Preis"
              :class="{'error': !validFields.price }"
              :message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
            />
          </div>
          <div class="flex-row gap-default">
            <PpFormInput
              v-model="currentCard.roles"
              id="card_roles"
              label="Rollen"
              :class="{'error': !validFields.roles }"
              :message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
            />
            <PpFormInput
              v-model="currentCard.sheets"
              id="card_sheets"
              label="Blätter"
              :class="{'error': !validFields.sheets }"
              :message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
            />
            <PpFormInput
              v-model="currentCard.layers"
              id="card_layers"
              label="Lagen"
              :class="{'error': !validFields.layers }"
              :message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
            />
          </div>
        </div>
      </main>
      <footer class="flex-row padding">
        <form method="dialog">
          <PpButton class="danger text">
            <span>Abbrechen</span>
          </PpButton>
        </form>
        <PpButton class="raised" @click="validate">
          <span>{{ cardLabel }}</span>
        </PpButton>
      </footer>
  </dialog>
</template>

<script setup lang="ts">
import type { Card } from '../../../shared/Card'

type Props = {
  currentCardIndex : number
  currentCard ?: Card
}

const { currentCardIndex, currentCard } = defineProps<Props>()
const emit = defineEmits(['update'])

const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const cardLabel = computed(() => currentCardIndex > -1 ? 'Bearbeiten' : 'Hinzufügen')

const checkPrice = () => {
  if (!currentCard) { return false }
  if (currentCard.price.length === 0) { return false }
  const price = +replaceComma(currentCard.price)
  return !isNaN(price)
}

const checkIfInteger = (toBeNumber : string) => {
  if (toBeNumber.length === 0) { return false }
  if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false }
  return !isNaN(+toBeNumber)
}

const validFields = reactive({
  name: true,
  price: true,
  roles: true,
  sheets: true,
  layers: true,
})

const validate = () => {
  if (!currentCard) { return }

  validFields.name = currentCard.name.length > 0
  validFields.price = checkPrice()
  validFields.roles = checkIfInteger(currentCard.roles)
  validFields.sheets = checkIfInteger(currentCard.sheets)
  validFields.layers = checkIfInteger(currentCard.layers)

  if (Object.values(validFields).every(value => value)) {
    emit('update')
    dialog.value?.close()
  }
}

onMounted(() => {
  dialog.value?.addEventListener('close', () => {
    validFields.name = true
    validFields.price = true
    validFields.roles = true
    validFields.sheets = true
    validFields.layers = true
  })
})
</script>