<script setup>

  const { post } = defineProps(['post'])

  const { createItems } = useDirectusItems()

  const claim = reactive({
    name: undefined,
    email: undefined,
    wallet: undefined,
    post: undefined,
    test: false,
    sent: false
  })

  async function onSubmit () {

    if (!claim.test) {
      try {
        const items = [{
          name: claim.name,
          email: claim.email,
          wallet: claim.wallet,
          post: claim.post
        }]
        
        // This is a test. Please try out our MVP at https://test.com and provide feedback here.
        // Looking forward to hearing more about Handshake.
  
        claim.sent = true
  
        await createItems({ collection: "claims", items });
      } catch (e) {}
    }
  }

</script>

<template>
  <div class="reserved">

    <!-- Hero -->
    <!-- <ReservedHero /> -->

    <ContentDoc class="content center" />

    <form v-if="!claim.sent" class="form center-md" :state="claim" @submit.prevent="onSubmit">
      <div class="group">
        <label for="name">Reserved Name</label>
        <input v-model="claim.name" id="name" type="text" placeholder=".coinkite/" required="true" />
      </div>

      <div class="group">
        <label for="email">Email</label>
        <input v-model="claim.email" id="email" type="email" placeholder="Email address" />
      </div>

      <div class="group">
        <label for="address">HNS Address</label>
        <input v-model="claim.address" id="address" type="text" placeholder="hs1qoja74qcw7tzdjos52dwkci93a..." />
      </div>

      <div class="group">
        <label for="post">Social post<sub>(optional)</sub></label>
        <input v-model="claim.post" id="post" type="text" placeholder="https://x.com/coinkite/status/382..." />
      </div>

      <div class="group hide">
        <label name="test">Do you plan on using your HNS name?</label>
        <input v-model="claim.test" type="checkbox" />
      </div>

      <button type="submit" >Claim name</button>

    </form>
    <div v-if="claim.sent" class="success">
      <h3>Success, your claim was submitted</h3>
      <p>Your reserved name will be transferred to the provided <br> HNS wallet soon. If you have any questions or concerns, <br>please send an
        email to <NuxtLink to="mailto:reserved@inspin.io">reserved@inspin.io</NuxtLink>.</p>
    </div>
    
  </div>
</template>