<script setup lang="ts">
import { FormKitNode } from '@formkit/core';
import { text, group } from '@formkit/inputs';
import Swal from 'sweetalert2';

async function submit(formData: Record<string, any>, formNode: FormKitNode) {
  console.group('submit');
  console.log('formData :>> ', formData);
  console.log('formNode :>> ', formNode);
  console.groupEnd();

  await new Promise(r => setTimeout(r, 2000))
  Swal.fire({
    title: 'Submitted! 🎉',
    icon: 'success',
    showConfirmButton: false,
    timer: 1500
  })
}
</script>

<template>
  <Fieldset
    legend="表单"
    toggleable
    class="min-w-full"
    pt:content:class="flex justify-center"
  >
    <!-- https://formkit.com/inputs/form#props-attributes -->
    <FormKit
      :value="{
        a: '1', b: '2',
        PInputText: 'PInputText default value from form',
        notInForm: 'not in form',
      }"
      :config="{
        classes: {
          form: 'flex flex-col w-full py-6 gap-8',
          outer: 'flex flex-col gap-2',
          /* label: 'font-medium block' */
        },
      }"
      type="form"
      #default="{ value }"
      @submit="submit"
      submit-label="提交 ✨"
      :submit-attrs="{
        'some-submit-attr': 'value',
      }"
    >
      <FormKit
        type="PInputText"
        name="PInputText"
        label="输入框"
        value="`default value from field`"
        some="prop"
        some-boolean-prop
        validation="required"
      >
      </FormKit>
      <FormKit
        type="PInputPassword"
        name="PInputPassword"
        label="密码"
        validation="required"
        toggleMask
        :feedback="false"
      />
      <FormKit
        v-if="!value?.PInputPassword"
        :type="text"
        :preserve="false"
        name="customType"
        value="this input will display if the password is empty"
      >
        <!-- <template #label>
          <div>labelll</div>
        </template> -->
      </FormKit>


      <FormKit
        type="group"
        name="group"
      >
        <FormKit
          type="text"
          name="text-in-group-1"
        >
        </FormKit>
      </FormKit>

      <FormKit
        type="group"
        name="group"
      >
        <FormKit
          type="text"
          name="text-in-group-2"
        >
        </FormKit>
      </FormKit>

      <Button
        label="Button"
        @click="() => {
          value!.button = value!.button || {};
          (value!.button as any).clicked = 'clicked';
          (value!.group as any)['text-in-group-1'] = 'changed-by-button';
        }"
      />

      <pre class="font-mono text-sm p-4 bg-slate-100 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
      ">{{ value }}</pre>
      <!-- <FormKitSummary /> -->
    </FormKit>
  </Fieldset>

</template>

<style scoped>
:deep(.formkit-input) {
  border: 1px solid #e2e8f0;
}
</style>