<template>
  <form
    ref="root"
    class="PriceCard card"
    :class="{ folded, deleting }"
    @submit.prevent="() => {}"
  >
    <header class="padding bg-blue">
      {{ card.name || 'Kein Name' }}
      <PpButton
          class="icon-button bg-main"
          @click="folded = !folded"
      >
        <Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
      </PpButton>
    </header>
    <aside>
      <div class="input-wrapper padding bg-blue flex-col">
        <div class="wrapper">
          <PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
          <PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
        </div>
        <div class="wrapper">
          <PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
          <PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
          <PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
        </div>
      </div>
    </aside>
    <main class="wrapper padding bg-white">
      <div class="info flex-col">
        <Icon class="icon" name="uil:toilet-paper" mode="svg" />
        <span class="price">{{ intl.format(ppr) }}</span>
        <span class="pro">Pro 1</span>
      </div>
      <div class="info flex-col">
        <Icon class="icon" name="uil:file-landscape" mode="svg" />
        <span class="price">{{ intl.format(pps) }}</span>
        <span class="pro">Pro 10</span>
      </div>
      <div class="info flex-col">
        <Icon class="icon" name="uil:layer-group" mode="svg" />
        <span class="price">{{ intl.format(ppl) }}</span>
        <span class="pro">Pro 100</span>
      </div>
    </main>
    <footer class="padding bg-blue flex-row">
      <PpButton
          class="delete"
          :class="{ deletable }"
          @click="deleteCard"
      >
        <Icon name="uil:trash" mode="svg" />
        Entfernen
      </PpButton>
      <PpButton class="cta white">
        <Icon name="uil:qrcode-scan" mode="svg" />
        Scan
      </PpButton>
    </footer>
  </form>
</template>

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

type Props = {
  deletable: boolean
  card: Card
}

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

onMounted(() => {
  calculate()
  if (card.price) folded.value = true
})

const root = ref<HTMLElement>()
const folded = ref<boolean>(false)
const deleting = ref<boolean>(false)

const ppr = ref(0)
const pps = ref(0)
const ppl = ref(0)

const intl = Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
})

const update = () => {
  emit('update', card)
}

const calculate = () => {
  if (!card.price || !card.roles) return
  ppr.value = card.price / card.roles

  if (!card.sheets) return
  pps.value = (ppr.value / card.sheets) * 10

  if(!card.layers) return
  ppl.value = (pps.value / card.layers) * 10

  update()
}

const deleteCard = async () => {
  root.value?.addEventListener('transitionend', () => {
    emit('remove')
  })

  deleting.value = true
}
</script>
